如何使用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