2012-07-03 2 views
0

Использование jQuery 1.7jQuery Делегат не привязывается, как я хочу его

У меня возникли проблемы с привязкой события Click к некоторому динамически загруженному контенту.

Я огляделся, попробовал .live, .delegate и .on, и я просто не могу заставить его работать.

Это мой код:

$(".fileexplorer_folderdlg").delegate(".delete", "click", function() { 
     console.log("Hello world!"); 
    }); 

Дело в том, .fileexplorer_folderdlg динамически загружается. Если я использую .fileexplorer (не динамически загружен), он работает, но у меня есть больше элементов с классом .delete, который я не хочу связывать (и ни один из классов элементов не может быть переименован или изменен по разным причинам) ,

Я также пробовал использовать .fileexplorer_folderdlg .delete как .delegate селектор, тоже не работал!

Конечно, я мог бы добавить еще один уникальный класс к элементам, которые я хочу привязать, но это действительно должно работать, не так ли?

ответ

2

Я считаю, что это будет работать:

$(document).on('click', '.delete', function() { 
    if ($(this).closest('.fileexplorer_folderdlg').length) { 
     console.log('hello, world!'); 
    } 
}); 

или даже просто:

$(document).on('click', '.fileexplorer_folderdlg .delete', function() { 
    console.log('hello, world!'); 
}); 

Как вы нашли, вы не можете связать на .fileexplorer_folderdlg, потому что это динамический. Поэтому вам необходимо связать какой-то статический элемент, который будет содержать этот элемент в какой-то момент в будущем.

Вместо этого это связывается с document (но, к сожалению, для каждого щелчка по документу после этого).

EDIT Джефф

Хотя приведенный выше код не работает, изменяя его немного сделал работу, хотя и не самым желательным решением.

$(document).on('click', '.delete', function() { 
     if($(this).closest(".fileexplorer") != null) 
      console.log("Thanks for your help!"); 
    }); 

Это работает, но это событие вызывается для всех остальных .delete классов, из которых очень много. Однако я не понимаю, почему использование .fileexplorer_folderdlg .delete не работает!

+0

Тогда я не могу заменить документ на «.fileexplorer»? – Jeff

+0

Да, я считаю, что это сработает. Трюк состоит в том, чтобы связать событие 'click' с' document'. Таким образом, независимо от того, что происходит с точки зрения динамического манипулирования DOM, распространение событий всегда найдет узлы для привязки. –

+0

@Jeff, если вы знаете, что другой элемент всегда будет дочерним элементом этого статического элемента. Если вы используете jQuery UI, хотя это не будет правдой - он перефразирует диалоги под 'document.body'. – Alnitak

Смежные вопросы