1

私は、当社が開発した独自の電子商取引プラットフォームに取り組んでいます。私は厳密にフロントエンド開発に携わっています。

残念ながら、ショッピング カートの多くは、インライン JavaScript イベントを使用してデータをデータベースに投稿しています。近いうちにインライン JavaScript を Jquery に変換する予定ですが、今のところそのままです。

私が抱えている特定の問題の 1 つは、カート内の各項目で繰り返される「カートから項目を削除」アイコンに関するものです。バックエンドの Delphi コードを使用してカートからアイテムを削除するインライン JavaScript イベントがあります。

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

この「カートからアイテムを削除」アイコンがクリックされたときにポップアップするJqueryダイアログボックスを追加し、ユーザーに確認を求めました。ダイアログボックスに「アイテムの削除」と「キャンセル」ボタンを追加しました。

私が遭遇した問題は、アイコンがクリックされたときに、インライン JavaScript イベントがダイアログ ボックス jquery の前に実行されることでした。わかりました。そこで、e.preventDefault()インライン JavaScript が最初に実行されないように jQuery コードに追加しました。問題は、ダイアログ ボックスの [アイテムの削除] ボタンをクリックしたときに、再度有効にする方法がわからないことです。

これが私の現在のコードです：

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

これは、多くのバックエンド システムがオンクリックなどを介してプレゼンテーション レイヤーとの絡み合いをいまだに主張していることを考えると、珍しい問題ではありません。とてもイライラします。

インラインのonclickイベントでもすべてを行うことを主張するJSFが原因で、私はこの同じ状況に遭遇しました。

解決策はハックですが、機能します。私がしていることは、ページのレンダリング時に、すべての onclick 属性を取得し、それらを jquery データ プロパティとしてキャッシュしてから、元の onclick を削除することです。

次に、独自の jQuery イベントをそれらにバインドし、いくつかのロジックに基づいて、元の onclick を起動するかどうかを決定できます。

例：

<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

これを機能させるための簡単で汚い方法を次に示します。ドキュメントの準備ができたら、問題のある要素のすべてのインライン コードを取り除き、それを文字列として要素の 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-30T17:22:34.527 に答える
0

次のようなことができますか？

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

これにより、フォームが送信されなくなり、送信するときにtrueに設定すると思います。

于 2012-04-30T17:08:55.110 に答える