jQuery尋找onClick值並替換動態html

Question

我有2 a鏈接與不同onclick值。他們都分享相同的class。

的onclick值是這些

BUTTON 1

onclick="return confirm('Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.');"

BUTTON 2

onclick="return confirm('Do you want to cancel this service?\nClick \'OK\' to continue. Click \'Cancel\' if you do not wish to proceed.');"

我正在嘗試做什麼。

當有人點擊錨鏈接時，理想情況下我想查找return值，並基於該值將確認彈出消息更改爲其他值。因此對於第一個按鈕，新消息將是message 1，按鈕2新消息將是message 2。

問題是，我無法編輯html作爲第三方程序。我只能用jQuery來操縱它。我試過，但林種有關如何識別哪些錨鏈接被點擊

var cancelBookingClick = $('a.replaced_btn')[0].onclick; 
var newCancelBookingClick = cancelBookingClick.toString(); 

if (newCancelBookingClick.indexOf('Click OK to cancel this booking') > -1){ 
    //replace THIS button onclick event 
} 

這是一個標籤的樣子

<a href="/view.php?booking=AIZLZ9&amp;cancel=t" class="replaced_btn" onclick="return confirm('Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.');" ></a> 

Answer 1

如果只有這兩個鏈接，你可以這樣做：

$('a.replaced_btn').eq(0).click(function(){ 
    confirm('Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.'); 
}); 

$('a.replaced_btn').eq(1).click(function(){ 
    confirm('Do you want to cancel this service?\nClick \'OK\' to continue. Click \'Cancel\' if you do not wish to proceed.'); 
}); 

編輯：

var links = $('a.replaced_btn'); 
for(var l = 0; l < links.length; l++){ 
    if($(links[l]).attr('onclick').match("Click OK to cancel")) 
     $(links[l]).attr('onclick', 'return confirm(some other message)'); 
    else //Do you want to cancel... 
     $(links[l]).attr('onclick', 'return confirm(yet another message)'); 
} 

這是解決這個問題的一個非常奇怪的方式，但似乎是你問什麼。基本上使用.attr()檢查onclick屬性，並針對確認消息的已知值執行match。然後，您可以將onclick屬性（也使用.attr()）設置爲其他值。

Answer 2

的方式失去了我通常做這樣的事情會在鏈接上定義自定義數據屬性，然後監聽任何鏈接的點擊。當click事件觸發並且我的函數運行時，我可以根據需要使用事件中引用的單擊的鏈接上的data屬性來執行操作。

我發現事件管理這種方式比使用onClick元素本身更清潔。

這裏有可能是什麼樣子：

<a href="#" class="replaced_btn" data-message="Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.">Cancel booking</a> 
<a href="#" class="replaced_btn" data-message="Do you want to cancel this service?\nClick \'OK\' to continue. Click \'Cancel\' if you do not wish to proceed.">Cancel service</a> 

<script type="text/javascript"> 
    $("a.replaced_btn").on("click", function (e) { 
     //Let the event bubble, but prevent the anchor from jumping to the top of the page 
     e.preventDefault(); 

     //React to the specific link 
     alert($(e.target).data("message")); 
    }); 
</script> 

請注意，代碼是未經測試。

希望這有助於解決您的問題。

使用jQuery的。數據（）方法來獲得HTML5數據文檔屬性：https://api.jquery.com/data/#data-html5

文檔上從jQuery事件對象獲取點擊的元件：https://api.jquery.com/event.target/

編輯1

你也可以使用一個屬性來切換功能，我發現它非常有用：

<a href="#" class="replaced_btn" data-type="cancel-booking">Cancel booking</a> 
<a href="#" class="replaced_btn" data-type="cancel-service">Cancel service</a> 

<script type="text/javascript"> 
    $("a.replaced_btn").on("click", function (e) { 
     //Let the event bubble, but prevent the anchor from jumping to the top of the page 
     e.preventDefault(); 

     //React to the specific link 
     switch ($(e.target).data("type")) { 
      case "cancel-booking": 
       //Handle this case 
       break; 
      case "cancel-service": 
       //Handle this case 
       break; 
     } 
    }); 
</script> 

請注意此代碼也未經測試。

編輯2

所以如果你使用這個片段中，這將增加對你的數據類型的屬性，然後您可以使用做任何你想做的是需要確定的聯繫，包括我寫的以上。

$("a.replaced_btn").each(function (idx, el) { 
    if ($(el).attr("onclick").indexOf("Click OK to cancel this booking") > -1) { 
     $(el).data("type", "cancel-booking"); 
    } else if ($(el).attr("onclick").indexOf("Do you want to cancel this service") > -1) { 
     $(el).data("type", "cancel-service"); 
    } 
}); 

或者，跳過添加數據類型屬性並處理函數內的鏈接特定邏輯。

編輯3

這裏有一個的jsfiddle顯示在他們，你可以通過鏈接和循環執行不同的功能取決於他們的onclick屬性的內容：

https://jsfiddle.net/2xa7xk32/

（也發生了變化第二個如果在編輯2是一個else-if）

Answer 3

如果href屬性是唯一可以依賴的a元素是唯一的，那麼這就是您需要使用的。以下是一個簡單的示例，但由於我們不知道其他鏈接的外觀或頁面上的所有其他鏈接，因此無法確切知道URL中的關鍵字。它可能需要更改爲使用正則表達式。

$("a").click(function(){ 
    if(this.href.indexOf('booking') != -1){ 
    alert("Booking link clicked") 
    } 
    if(this.href.indexOf('service') != -1){ 
    alert("Service link clicked") 
    } 
return false; 
}); 

此外，你需要像這樣的東西首先刪除現有的點擊處理程序：

$("a").each(function() { 
    if (this.href.indexOf('booking') != -1 || this.href.indexOf('service') != -1) { 
     $(this).attr("onclick", "").unbind("click"); 
    } 
    }); 

否則，內聯單擊處理程序和你的點擊處理程序將運行兩個。