Question

我正在尝试使用以下代码使用jQuery传播事件：

$(document).ready(function() {
$('#main').click(function(e){
var el = e.target.nodeName;
var $jObj = $(el);//jQuery object
$jObj.css('color','green');
});
});

这是简单的HTML代码：

<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

现在，如果我点击其中一个p元素，不仅选定的 p 会将颜色更改为绿色，而所有 p 。我无法理解这一点。根据上面的jQuery脚本，只有选定的<p>应该改变颜色。我做错了什么？

Answer 1

根据上面的jQuery脚本，只有选中的p

我对此表示怀疑。您正在选择所有 p元素：

var el = e.target.nodeName; // el = "P"
var $jObj = $(el);//jQuery object // equiv to $("p")

e.target.nodeName是您用作选择器的值"P"，$("P")选择所有 p元素。

要仅选择事件目标，请将DOM元素本身传递给jQuery：

$(e.target)

相关文档：jQuery(element)，event.target。

＆＃13;

$(document).ready(function() {
$('#main').click(function(e){
var $jObj = $(e.target);//jQuery object
$jObj.css('color','green');
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

＆＃13;

Answer 2

试试这个：

 $(document).ready(function() {
      $('#main > p').click(function(e){
         $(this).css('color','green');
      });
    });

Answer 3

$(document).ready(function() {
  $('#main').find('p').on('click', function(){
      $(this).css('color','green');    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

Answer 4

尝试使用on JQUERY p的事件委托，点击this元素，将$(document).ready(function() { $('#main').on('click','p',function(e) { var el = this; var $jObj = $(el);//jQuery object, see here carefully $jObj.css('color','green'); }); });指定给变量，然后将其用作选择对象申请css

{{1}}

请参阅DEMO

jQuery事件传播无法按预期工作

4 个答案: