为什么这段代码没有将点击事件绑定到A标签？

Question

我有这样的HTML：

<div class="osoba listItem podrucjaDjelovanja" id="listItem1" style='display:block'> 
    <h3>..</h3> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
    <p>Areas of practice: 
    <a href="/en/aktivnosti/#listItem1A">general legal support</a>, 
    <a href="/en/aktivnosti/#listItem2A">conciliation</a>, 
    <a href="/en/aktivnosti/#listItem4A">civil and commercial contracts </a>, 
    <a href="/en/aktivnosti/#listItem8A">property management</a> 
    </p> 
</div> 

，我想onClick事件绑定到一个标签。我正在使用这个电话：

$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a').on('click', function(event) { 

这对除了这个（最后一个）以外的所有情况都适用。当我点击链接时，该绑定将被忽略。我不确定我会做错什么。

编辑：感谢您的回应，我认为它会更容易，如果我指向你的网页，然后复制粘贴了很多代码。基本上，该页面是http://skrobotwp.gandzo.com/en/zaposlenici/，并且侦听器在ajax.js行36中定义。

Answer 1

那么我认为问题是你如何调用.on函数。在jQuery 1.7之前，他们对于.bind，.delegate和.live有单独的方法。但随着jQuery 1.7的到来，这些方法已被弃用，通过将它们都包含在1方法.on之下来简化它们。但由于文档不太清楚，人们不了解.on方法。 .on确实提供了上述3个弃用方法的功能，但它取决于您如何使用.on方法。这里有一个例子：

// Bind 
$(".podrucjaDjelovanja p a").on("click", function(e) {}); 

// Live 
$(document).on("click", ".podrucjaDjelovanja p a", function(e) {}); 

// Delegate 
$(".podrucjaDjelovanja").on("click", "p a", function(e) {}); 

我的猜测是，标记为不工作的.on调用时所声明的锚标记。在这种情况下，您必须按照现场活动的要求来执行.on。所以你需要改变的就是你拨打.on的方式。

$(document).on("click", ".navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a", function(event) { 
    alert("Clicked"); 
}); 

希望这会有所帮助。

Answer 2

该错误位于您已显示的代码之外的某处。

它工作得很好，从你的问题代码：http://jsfiddle.net/p4DRg/

$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a').on('click', function(event) { 
    event.preventDefault(); 
    alert(1); 
}); 

也许有一些无效的标签somehere，使元素最终从你的想法不同。

Answer 3

是您的代码在JQuery ready？

也能正常工作对我来说：

$(function(){ 
$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a') 
    .on('click', function(event) { 
     console.log($(this)); 
     return false; 
}); 
}); 

在这里看到：http://jsfiddle.net/fvDX8/

Answer 4

运行console.log($('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a'));，以确保你选择，你以为你是元素。

就我所见，您发布的代码似乎没有任何问题。我会看看其他地方。首先验证您的代码并确保您已修复任何语法或结构错误。

另外，你是否认为在你点击的东西前面可能有一个元素？例如，另一个元素的空白部分被覆盖。使用DOM检查器来检查。

Answer 5

您在div中使用了多个类名，这就是为什么jquery无法找到该类。我不知道原因，但我认为它可以正常工作，如果你改变类名称的位置，如下面的代码。

<div class="podrucjaDjelovanja osoba listItem" id="listItem1" style='display:block'> 

Answer 6

在ajax.js的123线更换内容：

$('#container').html(json.content);

新元素都有，当然，不附加任何处理程序。您必须将处理程序绑定到新元素，或者首先将其绑定到祖先元素。