2

ページ上の一連のスパンタグの後に、クリックイベントハンドラーを使用してリンクを動的に追加する作業を行っています。リンクはページに追加されていますが、クリックしてもイベントハンドラーは起動しません。Webコンソールに記録されたエラーはありません。私は以下のコードで明らかな何かが欠けていると確信しています：

function changeClicked (e) {
    e.preventDefault();
    console.log('should work');
}

function initChangeOwner() {
    var changeLink = $('<a />', {
        href: '#',
        text: 'change',
        'class': 'changeLink',
        click: changeClicked
    });

    var licenseFor = $('[id*="LicenseFor"]').after(changeLink);
}

$(document).ready(function () {
    initChangeOwner();
    // other inits
});

クリックイベントハンドラーが起動しないのはなぜですか？いじるのが好きな人のために、私はjsFiddleに例を設定しました。

*これはjQuery1.4.1を利用する古いアプリケーションです。残念ながら、今は新しいバージョンへの参照を更新するときではありません。

4

4 に答える 4

4

特定のケースでは、動的バインディングにこだわる必要はありません。要素を追加するときに自分が制御していることを確認し、その時点でイベントをバインドする場合は、要素をアタッチした後でイベントをクリックするだけでバインドできます。

function initChangeOwner() {
    var changeLink = $('<a />', {
        href: '#',
        text: 'change',
        'class': 'changeLink'
    });

    var licenseFor = $('[id*="LicenseFor"]').after(changeLink);

    // Now the elements exist and you can bind the click event using the 'changeLink' class as a selector.
    $(".changeLink").click(function(event){changeClicked(event);});

}

DEMO-要素が作成された後にバインドする

于 2012-08-31T17:19:14.557 に答える
2

通常は使用すると言います.on()が、jQuery1.4.4を使用しているように見えます。

.live()次のようにクリックのイベントを追加します。すべて機能します。

$('.changeLink').live('click', function (e) {
   changeClicked(e); 
});

1.4.4には、ある種のバグがあるように見えます。そのようなクリック/オンクリック属性を要素に追加することはできません。（補足::要素にclick / onclick / onmouseover / etcを使用したくない場合は、それぞれが個別に（要素ごとに）IEでスクリプトファイルを作成します（パフォーマンスが低下します）。これも元のファイルのように見えます。コードはjQueryの新しいバージョンで機能しますが、1.8で試してみただけで問題なく機能しました。

また、return false;changeClicked（）関数内で使用します（これは両方を実行し、その後はアンカーの属性stopPropagation & preventDefaultとともに実行されません。href="#"

function changeClicked(e) {
    console.log('here we are');

    return false; // stops link - preventDefault & stopPropagation
    console.log('it WONT get here');
}

jsFiddleデモ

于 2012-08-31T17:15:06.047 に答える
2

次のようにコードを再構築します。

function initChangeOwner() {
    $('[id*="LicenseFor"]').each(function(){
        var changeLink = $('<a />', {
            href: '#',
            text: 'change',
            'class': 'changeLink',
            click: changeClicked
        });
       $(this) .after(changeLink);
    });
}

http://jsfiddle.net/xUjTd/48/これは正常に機能しています

問題は、最初にイベントをchangeLinkにアタッチしてから、それをDOMに複数回挿入することだと思います。http://jsfiddle.net/xUjTd/60/

于 2012-08-31T17:22:36.283 に答える
1

関数は次のようになります。

function initChangeOwner() {
  $('[id*="LicenseFor"]').each(function(index){
    var changeLink = $('<a />', {
    href: '#',
    text: 'change',
    'class': 'changeLink',
     click: changeClicked
   });

    $(this).after(changeLink);
  });
}

作業デモ

于 2012-08-31T17:22:28.863 に答える