如何使用jquery动态获取点击值？

Question

我有以下代码，并且我尝试动态输出click文本值和日期值。 我不确定自己在做什么，点击时不返回任何内容

的HTML

!--- start dynamic bit  data violation type is will be dynmically generated by the server---->

<h3  id="toggle-next" data-violation-type="1111" class="violation"> lorm 1 violation 1</h3>
<div  id="moreinfo-231">

<p> lorem ipsum </p>
<p> lorem ipsum </p>
<p> lorem ipsum </p>

</div>
<!--- start dynamic bit---->
<!-- end dynamic bit-->
<h3  id="toggle-next" data-violation-type="11232" class="violation"> lorm 2 violation 2</h3>
<div id="moreinfo-232">

<p> lorem ipsum 2</p>
<p> lorem ipsum 2</p>
<p> lorem ipsum 2</p>

</div>
<!-- end dynamic bit-->

JQUERY

$(document).ready(function() {
$("#toggle-next").find("h3").click(function(){
            alert($(this).text());  

    console.log(" you have clicked " +$(this).text());  
 console.log(" you have clicked data " +$(this).data("violation-type"));            
                            });




});

Answer 1

您不需要.find()因为它是相同的元素。

$(document).ready(function() {
  $("#toggle-next").click(function() {
    var clicked = $(this);
    alert(clicked.text());  
    console.log(" you have clicked " + clicked.text());  
    console.log(" you have clicked data " + clicked.data("violation-type"));            
  });
});

如果多次使用对象，则缓存对象也是个好主意，在这种情况下，您使用$(this) 3次，因此每次必须在DOM中查找它。

另外，您应该将#toggle-next更改为.toggle-next ，并将其设置为class="toggle-next"而不是id="toggle-next" 。 每页只允许有1个ID，而jQuery在找到一个ID后将停止查找。

Answer 2

元素的ID必须是唯一的，因此您需要使用该类来选择所有这些目标h3元素。 在您的情况下，所有h3元素都具有类violation因此可以使用它。

 $(document).ready(function() { $("h3.violation").click(function() { alert($(this).text()); console.log(" you have clicked " + $(this).text()); console.log(" you have clicked data " + $(this).data("violation-type")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> !--- start dynamic bit data violation type is will be dynmically generated by the server----> <h3 id="toggle-next" data-violation-type="1111" class="violation"> lorm 1 violation 1</h3> <div id="moreinfo-231"> <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> </div> <!--- start dynamic bit----> <!-- end dynamic bit--> <h3 id="toggle-next" data-violation-type="11232" class="violation"> lorm 2 violation 2</h3> <div id="moreinfo-232"> <p>lorem ipsum 2</p> <p>lorem ipsum 2</p> <p>lorem ipsum 2</p> </div> <!-- end dynamic bit--> 

您的选择器还有另一个问题，那就是#toggle-next是h3元素，因此$("#toggle-next").find("h3")不会返回任何elemnet