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

I Have the following code and I am trying to the output click text values dynamically and the date value as well. I am not sure what i am doign wrong its not returning anything when clicked

我有以下代码,我正在尝试动态输出单击文本值和日期值。我不确定我做错了什么不点击时没有返回任何东西

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"));            
                            });




});

2 个解决方案

#1

You dont need the .find() because it's the same element.

你不需要.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"));            
  });
});

It's also a good idea to cache an object if you use it more than once, in this case you use $(this) 3 times so it must look it up in the DOM each time.

如果你多次使用它,那么缓存一个对象也是一个好主意,在这种情况下你使用$(this)3次,所以它必须每次在DOM中查找它。

Also, you should change the #toggle-next to .toggle-next and make it class="toggle-next" instead of id="toggle-next". You're only allowed to have 1 ID per page, and jQuery will stop looking after it finds one.

此外,您应该更改.toggle-next旁边的#toggle-并使其成为class =“toggle-next”而不是id =“toggle-next”。你只允许每页有1个ID,jQuery将停止查找它。

#2

Id of an element must be unique, so you need to use the class to select all those target h3 elements. In your case all the h3 elements have the class violation so use that.

元素的id必须是唯一的,因此您需要使用该类来选择所有这些目标h3元素。在你的情况下,所有的h3元素都有类违规,所以使用它。

$(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-->

Your selector has another problem, that is #toggle-next is the h3 element so $("#toggle-next").find("h3") won't return any elemnet

你的选择器还有另一个问题,那就是#tople-next是h3元素所以$(“#toggle-next”)。find(“h3”)不会返回任何elemnet

#1