Question

我有以下html

<li class = "item" data-id="0">Test<p>Test</p></li>

li不会自动添加到页面中。它是使用ajax生成的。当有人点击li时，如何激发点击事件？我知道我必须使用＆＃34; on＆＃34;关键词。我试过了，但它没有用。如何使用on关键字来更改li中最近的p的值？

这是我拥有的

    $(document).on("click", ".item", function(e){
        var target = e.target;
        console.log(target);
        var id = $(e).dataset.id;
        console.log(id);
        var mark = $(e).closest('p');
        IssueViewer.showItem(id, mark);
    });

Answer 1

在点击处理程序中，使用$(this).find('p')定位p元素，使用$(this).data('id')点击li的数据ID：

$(document).on("click", ".item", function() {
  var id= $(this).data('id');
  
  $(this).find('p').text('Changed: '+id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item" data-id="0">Test<p>Test</p></li>
</ul>

Answer 2

你可以试试这个。我在评论中包含了解释：

$(document).ready(function(){ /* PREPARE THE SCRIPT */
  $(".item").click(function(){ /* WHEN AN LI WITH A CLASS OF ITEM IS CLICKED */

    var elem = $(this); /* THE CLICKED ELEMENT */
    var etarget = elem.target; /* GET THE HTML ELEMENT */
    console.log(etarget); /* PRINT TO THE CONSOLE THE ELEMENT THAT WAS CLICKED */
    var id = elem.attr("data-id"); /* GET THE ID OF THE CLICKED LI */
    console.log(id); /* PRINT TO THE CONSOLE THE ID OF THE CLICK LI */
    elem.find("p").html(id); /* CHANGE THE CONTENT OF THE P CHILD */

  });
});

您还可以查看JSFiddle。

如何在jquery中使用关键字

2 个答案: