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 。