JavaScript事件处理程序jQuery

Question

我正在做一个由我自己编写的项目，该项目显然比HTML和JavaScript都比我自己更好。 html具有如下的AJAX链接：

<ul class="subNav">
       <li><a link="contacts.html">Contacts</a></li>
       <li><a link="contacts_add.html">Add Contact</a></li>
</ul>

我认为在以下代码中处理：

$('.subNav li a').click(function() {

        var href = $(this).attr('link')

        $('#mainStage').load(href, function() {
            pageLoad();
        })
})

上面的所有代码都可以完美运行。

我的问题是我似乎无法重新创建此功能。 我正在使用以下HTML：

 <div class="nameTitle colorOne"><a link="contacts_add.html">
      <span class="firstNameField">Contact Name</span>
 </a></div>

和这个JavaScript：

$('.nameTitle').click(function() {
        alert('')
        $('#mainStage').load("contacts_add.html", function() {
            pageLoad();
        })
})

当我单击“ nameTitle”类时，它应该将contacts_add.html加载到页面的mainStage部分中，但是我什么也看不见。 我相信能熟练使用这种编码风格的人可以告诉我为什么我的事件永远不会触发，而早期的代码却能触发。

提前致谢，

Answer 1

您应该尝试将代码更改为以下形式：

$('.nameTitle').click(function() {

  //This line finds the address to load
  var address = $(this).children("a").attr("link");

  //This line loads the address and then runs the pageLoad function when it has completed
  $('#mainStage').load(address, function() {
    pageLoad();
  });
});

如果这不起作用，则可能是因为html是动态加载的。 在这种情况下，您需要使用.on ，请在此处查看此链接。

在回答下面IVE布雷特的评论放在一起呈现的jsfiddle .on在行动这里 。 我还添加了.preventDefault因为这可能会导致问题。

Answer 2

尝试

$('.nameTitle a').click(function() {

可能是您正在尝试使用仅接受“ a”标签点击的浏览器，尽管希望这种情况越来越少。

Answer 3

“ click”事件将永远不会在您的div上引发，因为内部有一个定义了href a元素。 单击后，该事件将首先在锚链接上引发，默认情况下，该链接将重定向到href指定的位置。 为了使此工作正常进行，请在a处引起点击，以抓住它：

$('.nameTitle a').click(function(e) {
    e.preventDefault(); // prevent browser from following href
    alert('');
    $('#mainStage').load("contacts_add.html", function() {
        pageLoad();
    });
});

演示 -注释掉负载，因为该页面不在此服务器上。 还要注意，我将您a元素更改为具有属性href而不是link 。