默認Javascript事件＆Jquery互動

我正在開發我們公司開發的專有電子商務平臺。我嚴格參與前端開發。默認Javascript事件＆Jquery互動

不幸的是，很多購物車正在使用內嵌javascript事件將數據發佈到我們的數據庫。我計劃在不久的將來將內聯javascript轉換爲Jquery，但現在它們仍然存在。

我遇到的一個特定問題是在購物車中每個訂單項上重複的「從購物車刪除商品」圖標。有JavaScript事件多數民衆贊成利用後端Delphi代碼從購物車中刪除項目內聯：

document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL'; 
document.SPI_KitFormName.Action.value='Recalc_Kit';

我只是增加了一個jQuery的對話框彈出時，這種「從購物車中刪除項目」點擊圖標，讓用戶確認。我在對話框中添加了「刪除項目」和「取消」按鈕。

我遇到的問題是，當圖標被點擊時，內嵌JavaScript事件會在對話框jquery之前運行。我明白了。所以，我添加了我的jQuery代碼e.preventDefault()，以防止內嵌JavaScript首先運行。問題是，當我點擊對話框中的「刪除項目」按鈕時，我不知道如何重新啓用它。

這裏是我當前的代碼：

var currentForm; 
$(function() { 
    jQuery('#confirm-itemdelete').dialog({ 
     autoOpen: false, 
     height: 160, 
     modal: true, 
     resizable: false, 
     buttons: { 
      'Delete Item': function() { 
       $(this).dialog("close"); 
       $(".deleteitembutton a").die('click'); 
       currentForm.submit(); 
      }, 
      'Cancel': function(){ 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $('.deleteitembutton a').live('click', function(e) { 
     currentForm = $(this).closest('form'); 
     e.preventDefault(); 
     $('#confirm-itemdelete').dialog('open'); 
    }); 
});

感謝您的幫助，您可以提供。

來源

2012-04-30 dentalhero

'.preventDefaul（）'調用與基於屬性的事件處理程序沒有任何關係。這是爲了防止*瀏覽器*默認操作。在這種情況下，您對事件處理程序排序沒有太多的控制權。 – Pointy

爲什麼不現在轉換你的內聯JavaScript？看起來你會花費額外的時間和精力來繞開這種互動，而不是讓它在第一時間正確地工作。 –

你能不能做這樣的事情：

currentForm.submit = function(){ 
    return false; 
}

我認爲這將阻止從形式提交，那麼當你希望它提交其設置爲true。

來源

2012-04-30 17:08:55

問題是，onclick會首先觸發，然後是確認對話框，所以您應該事後設置該值。雖然你可以通過JavaScript重新提交表單提交，所以這可能是一個選項。 –

下面是一個快速和骯髒的方式，你可能會得到這個工作。在準備好的文檔上運行一個腳本，該腳本將所有有問題的元素的內聯代碼撕掉並將其作爲字符串存儲在元素的data屬性中。你需要一個更高級別的變量來存儲你點擊的按鈕。

$(document).ready(function(){ 
    var buttonClicked; // Lets you know which one was just clicked. 
    $('.deleteitembutton a')each(function(){ 
     $(this).data('cEvent', $(this).attr('onClick')); 
     $(this).removeAttr('onClick'); 
    }); 
}

我不知道哪個屬性在行腳本綁定到如此取代的「onClick」與任何屬性它是英寸

你做了之後，你將需要修改你的對話框代碼有點並創建一個新的事件。

// Add this to the 'click' event 
buttonClicked = $(this); 

// The new event 
$('.deleteitembutton a').on('newEvent', function() { 
    eval($(this).data('cEvent')); 
} 

// Add this line to your 'Delete Item' button in your dialog 
$('.deleteitembutton a').trigger('newEvent'); 

// Add this to your 'Cancel' button in your dialog 
buttonClicked = '';

就像我說的，這是快速和骯髒的，但它可能只是伎倆。

來源

2012-04-30 17:22:34 hradac

這是一個非常罕見的問題，因爲許多後端系統的習慣仍然堅持通過onclicks等與表示層糾纏在一起。這非常令人沮喪。

由於JSF堅持使用內聯onclick事件做所有事情，我遇到了同樣的情況。

該解決方案是hacky，但工程。我所做的是在頁面呈現時，我抓住所有onclick屬性，然後將它們緩存爲jQuery數據屬性，然後刪除原始的onclick。

然後我可以綁定我自己的jQuery事件並基於某些邏輯，我可以決定是否要關閉原始onclicks。

例子：

<span id="test" onclick="alert('onclick')">test</span>

後的文件準備好，我緩存的onclick：

$('#test') 
    .data('inlineOnclick',$('#test').attr('onclick')) 
    .removeAttr('onclick');

我然後綁定自己的單擊事件

$('#test') 
    .click(function(){ 
     if(confirm('delete this?')){ 
      //fire off original onclick event via anonymous function 
      var anonFunc = eval("(function(){" + $(this).data('inlineOnclick') + "})"); 
      anonFunc.call(this); 
     } 
    });

樣品：http://jsbin.com/ebotam

說，請注意，大多數人會尖叫你使用eval顯然是邪惡的。它可能是。也許還有更好的方法來處理這個問題，但現在對我來說這是一個好的解決方法。此外，內聯onclick也是邪惡的，所以也許與邪惡作鬥爭是可以的。 ;）

來源

2012-04-30 17:27:38

謝謝，所有。看起來普遍的共識是我錯誤地處理了這個問題。與其試圖控制事件觸發的順序，最好立即刪除onclick屬性。我會嘗試各種解決方案並回報。如果其他人有另一種方法，我很高興看到它。謝謝！ – dentalhero

默認Javascript事件＆Jquery互動

回答

相關問題