Question

我有一个AJAX调用，当它完成后我有这个代码：

$(".results").append('<div class="horizontal result_element"><div class="result_photo"></div><div id="'+user_id+'" class="result_data">'+user_name+'</div></div>');

稍后我想要点击类result_element时发生一些事情：

$(".result_element").click(function(){
var url = "profile.php?user_id="+$(this).children("[class='result_data']").attr("id");
$(location).attr('href',url);
});

但它不起作用，我的想法是jQuery创建了html元素，但没有将它们附加到DOM.Any想法如何使用该方法使这个工作？

Answer 1

我认为你的意思是＆＃39;以后＆＃39;用户视线中的时间不是脚本中的时间。

问题是jQuery在解释jQuery shell在事件y上执行x之后创建它时，不知道该元素。因此，如果您在click中设置$(document).ready(function(){*here*}) - 事件并且之后创建了一个元素（在文档准备就绪之后），jQuery就不会知道这些新元素。

所以要解决你的问题，尝试在创建元素后添加事件（创建不等于追加！）：

// created the element
var newElement = $('<div class="horizontal result_element"><div class="result_photo"></div><div id="'+ user_id +'" class="result_data">'+ user_name +'</div></div>');

// now set the event
newElement.click(function () {
    var url = "profile.php?user_id="+ $(this).children("[class='result_data']").attr("id");
    $(location).attr('href',url);
})

// now append it
newElement.appendTo($(".results"))
// or: $(".results").append(newElement)

你可以重新排序最后两个步骤，所以先添加它然后设置事件，这不是重点。关键是，首先创建元素，然后设置事件。

Answer 2

我相信，click不适用于动态添加的result_element类。请尝试使用以下代码段。

$(document).on("click",".result_element", function(){
   var url = "profile.php?user_id="+$(this).children("[class='result_data']").attr("id");
   $(location).attr('href',url);
});

不能使用通过append方法创建的元素

2 个答案: