JQuery делегат с селектором объекта - PullRequest
Новая
       13

JQuery делегат с селектором объекта

1 голос
/ 04 мая 2011

Если у меня есть селектор типа $ add, я могу сделать это: 

$add.click(function () {.....

Но я не могу сделать это: 

$('body').delegate($add, 'click', function () {.....

Как я могу заставить его работать?

Обновление

Принимая во внимание ответ @TJ Crowder.Это полный случай, я создаю две кнопки (которые я вставляю в dom) 

$add      = $(document.createElement('button')).addClass('add').appendTo('body');
$subtract = $(document.createElement('button')).addClass('subtract').appendTo('body');

Выполнение делегирования в $ add.selector вступит в силу для обеих этих кнопок, почему это так?

1 Ответ

4 голосов
/ 04 мая 2011

Вы можете использовать свойство selector .См. Предостережения в документах, а также заметки о том, как объединить его с context.Одним из таких предостережений (хотя, на мой взгляд, это не сразу видно из документации) является то, что когда вы начинаете изменять выделение с помощью вызовов методов, свойство selector становится менее полезным.Например: 

var $add = $("div").not(".bar");
display("$add.length = " + $add.length);
// displays 3 in my example, because I have three divs that don't have class "bar"
display("$add.selector = " + $add.selector);
// displays "div.not(.bar)" (note the '.' rather than ':')
$add = $($add.selector);
display("$add.length = " + $add.length);
// displays 0 in my exmaple, because "not" is taken for a class name

Живая копия

На мой взгляд, это не очень полезно.

Это отвечает на вопрос, который вы на самом деле задавали, но, возможно, есть лучший способ решить основную проблему проектирования.: -)

Обновление : Возможно, проблема в том, что при использовании selector на $add возвращается «кнопка».(Я не пробовал, это кажется вероятным.)

Я бы решил это так:

Вариант A :

Если , у вас есть только одна кнопка с классом «добавить», то: 

$add      = $(document.createElement('button')).addClass('add').appendTo('body');
$subtract = $(document.createElement('button')).addClass('subtract').appendTo('body');
$('body')
    .delegate("button.add", "click", handleAdd)
    .delegate("button.subtract", "click", handleSubtract);

Опция B :

Если есть другие кнопкис этими классами дайте этим кнопкам некоторую идентифицирующую характеристику - их собственный класс, или id, или name, затем используйте это в селекторах delegate.Пример (но при необходимости измените): 

$add      = $("<button id='btnAdd' class='add'>").appendTo('body');
$subtract = $("<button id='btnSubtract' class='subtract'>").appendTo('body');
$('body')
    .delegate("#btnAdd", "click", handleAdd)
    .delegate("#btnSubtract", "click", handleSubtract);

Обратите внимание, что я переключился на нотацию HTML для создания кнопок, так как это более сжато, когда вы получаете несколько атрибутов и тому подобное.

Сторонапримечание: если есть более точный контейнер, на который не влияет обновление ajax, которое вы можете использовать, я бы это сделал.Использование body в качестве контейнера довольно глобально.Вы сказали, что форма заменяется на ajax, поэтому любой контейнер, который вы обновляете в вашем ajax, вероятно, будет хорошим выбором.

...