-1

jQueryのonclickを使用して、クラスcoda-nav-left-arrowで動的に追加されたdivにクリックをバインドしています。

$('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
    alert(countClicks);
});

問題は、この生成されたdivが別の生成されたdivの子であるため、＃slider-wrapdivのすぐ下にないことです。

<div id="slider-wrap">
  <div id="slider-id-wrapper" class="coda-slider-wrapper arrows">
    <div class="coda-nav-left-arrow">

これが（私が思うに）jQueryがそれを認識しない理由です。私の仮定は正しいですか？どうすれば表示できますか？

編集：明確にするために、＃slider-wrapdivは最初から存在します。これは動的に生成されません。他のすべてはです。

Edit2（解決済み）：これはコードが機能するのに十分です：

$('.coda-nav-left-arrow').on('click',function(){});

それが囲まれている限り

$(document).ready(function(){}

ブロック。

編集3： .on（）は複数のレベルの深さになり、ドキュメントの準備ができたときにのみ機能することを学びました。

4

5 に答える 5

3

#slider-wrapハンドラーがDOMにあるときに、ハンドラーをアタッチしましたか？

jQuery.readyでラップしてみてください：

jQuery(function($) {
    $('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
        alert(countClicks);
    });
});

または、divの作成後にスクリプトコードを追加します。

<div id="slider-wrap">
  <div id="slider-id-wrapper" class="coda-slider-wrapper arrows">
    <div class="coda-nav-left-arrow">
    ....
  ....
</div> <!-- end of #slider-wrap -->
<script type="text/javascript">
    $('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
        alert(countClicks);
    });
</script>
于 2012-11-11T00:09:48.927 に答える
2

これを試して：

$(document).on('click', '.coda-nav-left-arrow', function () {
    alert(countClicks);
});
于 2012-11-10T23:50:16.320 に答える
2

あなたのコードは完全に素晴らしいです

$(document).ready(function(){
    $('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
        alert(countClicks);
    });
});

...このフィドルを確認してください。

委任は、直接の子供だけに影響を与えるのではなく、すべての下位レベルに影響を与えます。この特定のコードを壊す別のjsまたは構文エラーがあるかもしれません（しかし、リンクなしで言うのは難しいです）

于 2012-11-11T00:53:02.977 に答える
1

委任先の親要素を選択する必要があります。存在する要素を選択する必要があります。の親がいる場合は、やらないようにしてbodyください。document#slider-wrap

私が提案する別の方法は、次のように動的に要素を作成しながらイベントを添付することです。

var $sliderWrap = $('<div id="slider-wrap">{YOUR OTHER HTML HERE}</div>');
$sliderWrap.on('click', '.coda-nav-left-arrow',function(){
  alert(countClicks);
});
$sliderWrap.appendTo('body');

また、jQueryが舞台裏で何をしているのかを理解できるように、イベントの委任について読むことをお勧めします。それほど複雑ではありません。

http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/

于 2012-11-10T23:57:23.860 に答える
1 
<button class="btn">Do Something</button>​

$('.btn').on('click', function() {
  $('body').prepend($('<button>').attr('id', 'foo').html('I\'m a foo doer'));
  return $('#foo').on('click', function() {
    return alert("Foo thing");
  });
});

フィドル

于 2012-11-11T18:11:42.877 に答える