动态添加对象的jQuery事件处理程序

Question

我在jQuery中遇到了一个动态添加DOM对象的问题。首先我使用这个：

var $input = $('#search-input');
var $usersList = $('#ulist');
       $input.on('input', function () {
        $.ajax({
            type: 'get',
            url: '/userlist',
            data: {query: $input.val()},
            success: function (response) {
                var json = JSON.parse(response);
                $usersList.empty();
                $.each(json, function (index, val) {
                    $usersList.append("<div id="listelem"><a href="#">" + val + "</a></div>");  
                });
            }
        });
    });

 <div id="ulist"></div>
 <input id="search-input" type="text">

将div插入usersList。这工作得很好，但现在我想在单击该div时从中获取val以进一步处理它。我写了一段代码：

$usersList.on('click','#listelem', function(){
   alert("clicked");
});

当我点击div时，我得到了适当的警告，但现在我不知道如何从这个元素内部获取数据。

Answer 1

我不知道合适的工程，但在开发一些需求时，我也处理过类似的问题。基本上正如我所理解的，你想找出事件的目标并从中拖动一个值？如果是这样的话，你可以这样做：

jQuery(document).on('click', '#listelem', function(event){
var x = event.target.val();// event.target.value; depending on your situation and availability of the method.
});

希望这能有所帮助。

Answer 2

尝试这个

$(document).on('click','#listelem', function(event) {
   alert($(event.target).text());
 });

jsfiddle

Answer 3

感谢您的帮助。对我来说，正确的选择是打电话给

var mem=event.target.innerText；

Answer 4

您可以使用常规javascript来实现这一点，而不需要Jquery。

  document.addEventListener("click", function(e) {
    if(e.target) {
     console.log("item clicked ", e.target.textContent);
  }
});

这应该可以得到当前目标的值。