Default Javascript Event & Jquery Interaction

Default Javascript Event & Jquery Interaction

本文关键字：Jquery Interaction amp Javascript Event Default      更新时间：2023-09-26

我正在开发我们公司开发的专有电子商务平台上工作。我严格参与前端开发。

不幸的是，很多购物车都在利用内联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');
    });
});

感谢您提供的任何帮助。

这是一个并不少见的问题，因为许多后端系统仍然坚持通过 onclicks 等方式与表示层纠缠在一起。这非常令人沮丧。

由于 JSF，我遇到了同样的情况，它坚持使用内联点击事件做所有事情。

解决方案是黑客，但有效。我所做的是在页面渲染时，我获取所有 onclick 属性，然后将它们缓存为 jquery 数据属性，然后删除原始的 onclick。

然后，我可以将自己的jQuery事件绑定到它们，并根据一些逻辑，我可以决定是否要触发原始的onclicks。

例：

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

文档准备好后，我缓存了点击：

$('#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也是邪恶的，所以也许以恶作恶是可以的;)。

你能

做这样的事情吗：

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

我认为这将阻止表单提交，然后在您希望提交表单时将其设置为 true。

这是一种快速而肮脏的方法，您可以让它工作。在文档就绪时，运行一个脚本，该脚本会删除有问题的元素的所有内联代码，并将其作为字符串存储在元素的数据属性中。而且您需要一个更高级别的变量来存储您正在单击的按钮。

$(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 = '';

就像我说的，这既快速又肮脏，但它可能只是解决问题。

相关文章：