1

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

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

感谢您提供的任何帮助。

4

3 回答 3

1

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

由于 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因为它显然是邪恶的。它可能是。也许有更好的方法来处理这个问题，但它对我来说是一个好的解决方法。而且，除此之外， inlineonclick也是邪恶的，所以也许与邪恶作斗争是可以的。;)

于 2012-04-30T17:27:38.997 回答
0

你能做这样的事情吗：

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

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

于 2012-04-30T17:08:55.110 回答
0

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

$(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-30T17:22:34.527 回答