Question

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

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

感谢您提供的任何帮助。

Answer 1

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

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

解决方案很糟糕，但有效。我做的是页面渲染，我抓取所有的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也是邪恶的，所以也许可以用邪恶来对抗邪恶。 ;）

Answer 2

你可以这样做：

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

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

Answer 3

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

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

就像我说的那样，这很快又很脏，但它可能就是这样做的。

默认Javascript事件＆amp; Jquery交互

3 个答案: