デフォルトのJavascriptイベントとJqueryの対話

Question

私は、当社が開発した独自の電子商取引プラットフォームを開発中です。私はフロントエンドの開発に厳密に関与しています。

ショッピングカートの多くは、インラインJavaScriptイベントを利用してデータをデータベースに送信しています。私は近い将来Jqueryにインライン・ジャバスクリプトを変換する予定ですが、現在はそのままです。

私が持っている特定の問題の1つは、カート内の各広告申込情報で繰り返される「カートからアイテムを削除」アイコンです。私はちょうどにユーザーを求めて、この「カートからアイテムを削除」アイコンをクリックしたときにポップアップするためにjQueryのダイアログボックスを追加

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

：javascriptのカートからアイテムを削除するには、バックエンドDelphiのコードを利用していますイベントのインラインがあります確認してください。ダイアログボックスに「アイテムの削除」と「キャンセル」ボタンを追加しました。

私が遭遇した問題は、アイコンがクリックされたときに、インラインの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'); 
    }); 
}); 

ありがとう：

は、ここに私の現在のコードです。私は、これはあなたがそれを提出したいときにtrueに設定し、その後、提出からフォームを防ぐことになると思い

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

：

Answer 1

あなたはこのような何かを行うことができます。

Answer 2

これはすばやく、汚い方法でこれを動作させることができます。ドキュメントの準備ができたら、問題の要素のインラインコードをすべて切り取って、要素のデータ属性に文字列として格納するスクリプトを実行します。クリックするボタンを保存するには、より高いレベルの変数が必要です。

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

Iは、インラインスクリプトはそれがであるものは何でも属性を持つ「の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 = ''; 

私が言ったように、これはすばやく汚れていますが、ちょうどそのトリックを行うかもしれません。

Answer 3

これはまだonclicksを経由して、プレゼンテーション層等で自分自身を交絡を主張するので、多くのバックエンドシステムの習慣を与えられ、珍しいことではありません問題があります。非常にイライラしています。

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

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

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

例：文書準備ができた後

<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を悪用しているように見せてくれることを悲鳴を上げることに注意してください。おそらくそうです。これを処理するにはもっと良い方法があるかもしれませんが、今はOKの回避策として私のために働いています。また、インラインonclickも悪いので、おそらく悪と戦うのはOKです。 ;）