JavaScript事件處理程序jQuery

我正在開發一個由我在HTML和JavaScript上明顯優於我自己的人編寫的項目。 HTML是否已AJAX鏈接是這樣的：JavaScript事件處理程序jQuery

<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加載到頁面的主級部分，但我看不到任何東西發生。我確信有人能夠熟練地使用這種編碼風格，可以告訴我爲什麼我的事件永遠不會觸發，但早期的代碼確實如此。

由於提前，

來源

2012-07-22 Brett

你應該試着改變你的代碼是這樣的：

$('.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，請參閱此鏈接here。

爲了迴應佈雷特的評論，下面我將一個jsfiddle顯示.on的行動here。另外我還加了.preventDefault，因爲這可能會導致問題。

來源

2012-07-22 23:46:56 Undefined

謝謝薩姆，這段代碼並不像你預測的那樣工作。我試過這個''''。'nameTitle a'）。on（'click'，function（）{...'但它不起作用。你能給我一個如何使用'.on' 。 – Brett 2012-07-22 23:54:48

@Brett當然，我可以給我一些時間來設置一個例子 – Undefined 2012-07-22 23:55:13

@Brett現在看看我的jsfiddle示例，如果你使用firebug，你可以看到日誌消息，因爲它被調用。 – Undefined 2012-07-22 23:59:05

嘗試

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

它可以是你與只接受點擊「A」的標籤，儘管他們得到罕見的希望瀏覽器嘗試。

來源

2012-07-22 23:54:16 Aadaam

對不起@Aadaam這也沒有效果。 – Brett 2012-07-22 23:58:10

'click'事件永遠不會在您的div上引發，因爲內部的a元素定義了href。一旦你點擊，事件將首先在錨鏈接上產生，默認情況下，重定向到由href指定的位置。爲了得到這個工作，趕上點擊當它升起在a：

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

Demo - 註釋掉負載，因爲該頁面是不是在此服務器上。另外請注意，我將a元素更改爲href而不是link。

來源

2012-07-22 23:55:30 nbrooks

ps不言而喻，你需要在頁面中包含jQuery以使其工作... – nbrooks 2012-07-23 00:01:35

JavaScript事件處理程序jQuery

回答

相關問題