Question

请查看我的JavaScript

<script>
            function dynamicMessageLoader(id) {

                $.get("SentMessagesDynamicLoaderServlet?idMessageGroup=" + id, function (responseJson) {

                    $('#li_list').empty();
                    var array = [];

                    $.each(responseJson, function (index, item)

                    {
                        array[index] = item;
                    });

                    $('#message_count').empty();

                    var readArray = array.length;
                    var count = readArray + " Messages Selected";
                    $('<p />', {html: count}).appendTo('#message_count');

                    for (var i = 0; i < readArray; i++) {

                        //$('<li />', {html: array[i][1]}).appendTo('#li_list');
                        $('<li>', { 'class': 'clickable-row hand', id: array[i][0], html: array[i][1]}).appendTo('#li_list');

                    }
                });
            }
        </script>

现在关联的HTML

<ul id="li_list">
<li class='clickable-row hand' id="12" >text</li>                                  
</ul>

当调用上述JavaScript代码时，它会向<li>添加li_list个元素。如您所见，我已经在那里硬编码了一个<li>元素。

现在调用<li>元素时，需要执行以下Jquery代码。

<script>

            jQuery(function () {
                $('.clickable-row').click(function () {


                    var $this = $(this),
                            id = this.id;

                    //alert(id);

                    $.get("MessagesDynamicPopupServlet?idMessage=" + id, function (responseJson) {

                        var array = [];

                        $.each(responseJson, function (index, item)

                        {
                            array[index] = item;
                        });
                        var image = array[3];

                        $('#idMessage').val(array[0]);
                        $('#idMessageGroup').val(array[1]);
                        $('#message').val(array[2]);

                        $('#blah').attr("src", image);

                        $('#videoURL').val(array[4]);
                    });
                });
            });

        </script>

现在的问题是，上面的Jquery代码只为硬编码<li>调用。它永远不会被我通过JavaScript添加的<li>元素调用。

我该如何解决这个问题？

Answer 1

对于新创建的元素，只需使用Delegated events即可。所以在这里你将一个事件附加到父母（在这种情况下是document），这将被触发所有它的后代（.on函数中的第二个参数）在你的案例中是.clickable-row类。

它不适用于$('.clickable-row').click，因为在事件分配时，最后一个仅附加到现有的dom节点（因此新创建的不会附加到此点击）。

见下面的代码：

$(document).on("click", '.clickable-row', function() {


  var $this = $(this),
    id = this.id;

  //alert(id);

  $.get("MessagesDynamicPopupServlet?idMessage=" + id, function(responseJson) {

    var array = [];

    $.each(responseJson, function(index, item)

      {
        array[index] = item;
      });
    var image = array[3];

    $('#idMessage').val(array[0]);
    $('#idMessageGroup').val(array[1]);
    $('#message').val(array[2]);

    $('#blah').attr("src", image);

    $('#videoURL').val(array[4]);
  });
});

当<li>以编程方式构造时，JQuery不会被解雇

1 个答案: