Помощь в JQuery селекторы

Question

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

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

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

Благодаря

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

Использование showLi в контексте:

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

Answer 3

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

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

Answer 4

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

Вот пример:

Answer 5

Что об этом?

<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>