Помощь в селекторах jquery

Question

Я хочу сделать что-то вроде этого:

var showLi = $("<li></li>");
$(showLi).append("<a href='#' class='showData'>Show</a>");
$($ul).append(showLi);
$(showLi+" a.showData").click(function(){
 alert("clicked");
});

Приведенный выше код выдает ошибку, когда я использовал селектор для добавления click метода.Что может быть другим способом сделать это?

Спасибо

Answer 1

Вы можете сделать так:

var showLi = $("<li></li>");
$("<a href='#' class='showData'>Show</a>").appendTo(showLi).click(function(){
     alert("clicked");
});
$ul.append(showLi);

Это позволяет избежать повторного поиска элемента. showLi уже является объектом jQuery, поэтому вам не следует снова передавать его в $(). По названию переменной $ul я предполагаю, что ее значение также является jQuery. Если это не так, вы действительно должны передать его $().

Кроме того, вы можете создать элемент с помощью:

$('<a />', {href: '#', class: 'showData', text: 'Show'})

---

Вы получаете ошибку, потому что вы пытаетесь объединить объект со строкой. Если у вас уже есть объект jQuery, вы можете искать потомков с помощью find().

Answer 2

Вам нужно будет использовать делегат () для привязки обработчика событий, так как он не находится в DOM при загрузке страницы.live () также будет работать, но делегат более эффективен.

Вот пример: http://jsbin.com/araqe3/edit

Answer 3

Используйте showLi в качестве контекста:

$("a.showData",showLi).click([...])

Answer 4

Как насчет этого?

<script language="Javascript" type="text/javascript">
$(document).ready(function(){
    var showLi = $("<li></li>");
    $(showLi).append("<a href='#' class='showData'>Show</a>");
    $('#test').append(showLi);
    $("a.showData").click(function(){
     alert("clicked");
    });
});
</script>
<div id='test'></div>

Answer 5

Попробуйте это:

var showLi = $("<li></li>");
$(showLi).append("<a href='#' class='showData'>Show</a>");
$($ul).append(showLi)
$("a.showData", showLi).click(function(){
     alert("clicked");
});