Question

我的代码中有这个

<div class="prof-infos">Email:&nbsp;&nbsp;&nbsp;<span>blahblah@email.com&nbsp;&nbsp;&nbsp;</span><span class="change">change</span></div>

我有这个

$(".change").click(function() {
   alert("bloop");
});

然而，当我点击跨度;它没有做任何事情。

解

使用此代替

$(document).on("click", ".change", function() {
   alert("why does this work?");
});

Answer 1

这完美无缺。您是否可以发布任何其他详细信息，如果您忘记导入它，请导入Jquery库。

[JS小提琴链接] [1] https://jsfiddle.net/c7m1b4ke/

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<div class="prof-infos">Email:&nbsp;&nbsp;&nbsp;<span>blahblah@email.com&nbsp;&nbsp;&nbsp;</span><span class="change">change</span></div>

$( ".change" ).click(function() {
  alert( "Handler for .click() called." );
});

Answer 2

在第一个示例中，您尝试将单击处理程序直接附加到span元素，但就像您在注释中所说的那样，这些跨距稍后会从ajax调用中获取，因此它们不是由页面加载的时间。你不能将事件处理程序附加到甚至不存在的事物上。

第二个示例的工作原因是因为您正在使用事件委派，即您将单击处理程序附加到文档元素，该元素是DOM的根，并且从一开始就存在。

JQuery实现了一种称为事件冒泡的模式，这意味着某些事件将通过DOM树从它们发起的元素传递到其父元素，然后传递到父元素，依此类推，直到它为止它由其中一些处理并且传播停止，或者直到它到达DOM（文档）的根。

当然，冒泡对页面的效率有一些代价，因此不建议将处理程序附加到根目录。而是将它附加到从头开始存在的最近的祖先（可能是一些容器div）。这样事件不需要继续前进。

有关此内容的更多信息，请查看

http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

https://api.jquery.com/on/#direct-and-delegated-events

Answer 3

我知道你错过了jquery库，它在这里工作，检查上面的代码片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

$(".change").click(function() {
   alert("bloop");
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="prof-infos">Email:&nbsp;&nbsp;&nbsp;<span>blahblah@email.com&nbsp;&nbsp;&nbsp;</span><span class="change">change</span></div>

＆＃13;

你可以像这样使用

$(document).on('click','.change',function(){
   /*Your code*/
});

＆＃13;

$(document).on('click','.change',function(){
   alert("bloop");
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <div class="prof-infos">Email:&nbsp;&nbsp;&nbsp;<span>blahblah@email.com&nbsp;&nbsp;&nbsp;</span><span class="change">change</span></div>

＆＃13;

Jquery选择跨度不起作用

3 个答案: