0

次のような HTML のシンプルなボタンがあります。

<input type='button' id='btnPrint' value='Print' onclick="changeStylesheet();" />

このボタンには、onclick イベント ハンドラーが既に含まれています。ここで達成しようとしているのは、同じボタンの onclick イベント ハンドラーを作成できるようにすることです。ボタンが押された回数を追跡する 2 番目のメソッドを追加したいと思います。

いくつかのアプローチ:

最初: インライン イベント登録に従って、HTML に別の関数呼び出しを追加します。

<input type='button' id='btnPrint' value='Print' onclick='changeStylesheet();trackThis();>' />

これは最も簡単な方法ですが、私の状況では実行できません。

2 番目: onclick イベントを取得し、未定義かどうかを確認します。次に、JavaScript ネイティブ構文を使用して、無名関数でイベント ハンドラーを再構成します。

var elem = document.getElementById('btnPrint');
var existingHandler = **elem.onclick ? elem.onclick : function () {};**
elem.onclick = function () {
     trackThis();
     existingHandler();
};

3番目：上記のアプローチは機能しますが、上記の2つのアプローチをjQuery構文で行う方法を学びたいと思っています。 

 var elem = $('#btnPrint');
    var existingHandler = **elem.click ? elem.click : function () {};**
    elem.click(function () {
        trackThis();
        existingHandler()
    });

私の #3 ソリューションで何が起こっているかというと、 Uncaught TypeError: Object [object Window] has no method 'trigger' エラーが発生しています。

どんなヒントでも大歓迎です。

4

2 に答える 2

2

両方のハンドラーを jQuery にアタッチする場合は、単純に 2 つのクリック ハンドラーを設定します。内部的には、jQuery は「オブザーバー パターン」を実装して、ハンドラーを集約し、追加された順序で順次実行します。

$('#btnPrint').on('click', firstHandler);
$('#btnPrint').on('click', secondHandler);

これらのステートメントは、連続している必要はなく、同じスコープ内にある必要さえありません。

ハンドラーが HTML で既に指定されている場合、同じ原則が適用されます。jQuery は、元のハンドラーの後に追加のハンドラーを実行するだけです。

HTML:

<input type='button' id='btnPrint' value='Print' onclick=".....;" />

jQuery:

$('#btnPrint').on('click', secondHandler);

フィドルを見る

編集 ...

jQuery でアタッチされたハンドラーの後に元のハンドラーが実行されるように、順序を尊重することもできます。

var $btnPrint = $('#btnPrint');
var originalHandler = $btnPrint.get(0).onclick;
$btnPrint.get(0).onclick = null;

$btnPrint.on('click', secondHandler);
$btnPrint.on('click', originalHandler);

フィドルを見る

于 2012-05-24T06:32:28.147 に答える
0

私があなたの質問を正しく理解していれば、

これはうまくいくはずです、

$('#btnPrint').off("click", "**" ).on('click',function(){
     trackThis();
     existingHandler(); 
})

つまり、最初offに既存のイベント ハンドラー、次にonカスタムのイベント ハンドラーです。

これで問題が解決しない場合は、これが必要な場合があります。

jQueryまたはJSを使用してイベントハンドラが存在するかどうかを確認するには?

編集

inline をオーバーライドしたい場合はonclick、この汚いアプローチを使用できます。

jQuery コード:

$(function(){ 
        var mydiv = $('#mydiv');
        var inlineClick = mydiv.attr('onclick');

        mydiv.removeAttr('onclick').click(function(){
            // your code 
            alert('mycode');

            eval(inlineClick);

            // or first do, eval(inlineClick);
            //then your code later

        })
    });     
    function inlinefun(){
        alert('I am inline function'); 
    }

マークアップ:

<div id='mydiv' onclick='inlinefun();'>Mydiv</div>

「悪」評価なし

（すべての状況で機能するとは限りません。指示を与えただけです）

$(function(){ 
        var mydiv = $('#mydiv');

            // Dirty way to get function name and its args by a string.
    var inlineClick = mydiv.attr('onclick').split('(');
    var funName = inlineClick[0];
            var args = inlineClick[1].replace(')','');


    mydiv.removeAttr('onclick').click(function(){
        // your code 
        alert('mycode');  

        // The default inline function
        window[funName](args);

        // you can change the order as you want

    })
});     
function inlinefun(msg){
            // I know I am passing string, so removing the quotes, you need a generalised approach here
    alert(msg.replace('"','')); 
}

マークアップ:

<div id='mydiv' onclick='inlinefun("I am inline function");'>Mydiv</div>
于 2012-05-24T07:17:20.087 に答える