JsRenderを使用してhtmlをレンダリングした後、クリックリスナーのJQueryが起動しない

Question

JsRenderを使用してレンダリングした後、ページ上にあるDOM要素にクリックリスナーを添付しようとしていますが、少し難解です。

マークアップ：

<button id="placeBid" data-attr-saleId="{{:id}}" class="btn btn-lg btn-add-to-cart"><span class="glyphicon glyphicon-shopping-cart"></span>Bid on this item</button> 

jQueryのクリックでリスナーコード：

$(document).ready(function(){ 

    $('#placeBid').on('click','#templateContainer', function() { 

      console.log('Clicked place bid') 

      const saleId = $(this).attr('data-attr-saleId') 
      if (!saleId) return 

      $.ajax({ 
      url: '/sale/placeBid', 
      data: { 
       bidAmount: $('#amount').val(), 
       hotelSale: saleId, 
       currency: $('#currencies:selected').val() 
      }, 
      method: 'POST', 
      success: function (res, ts, xhr) { 
       if (xhr.status == 200 && res.status == 200) { 
       $.toaster({priority: 'info',message: 'Succesfully bidded on sale'}) 
       }else { 
       //handle error 
       } 
      } 
      }) 
     }) 
}); 

htmlがjsRender経由templateContainerテンプレートにレンダリングされますdocument.ready関数内

const html = template.render({viewLocalsHere}); 
$('#templateContainer').html(html) 

ログconsole.log($('#placeBid'))要素が検出されており、そこのonclickハンドラを取り付ける時には、しかし、ボタンをクリックすると、問題になる可能性がどのようなClicked place bid

をログに記録しないことを示しています？ありがとう

Answer 1

jqueryのon機能を悪用していると思います。

http://api.jquery.com/on/

セレクタが設けられている場合、イベントハンドラは、委任と呼ばれます。バインドされた要素でイベントが直接発生したときにハンドラが呼び出されるのではなく、セレクタに一致する子孫（内部要素）に対してのみハンドラが呼び出されます。 jQueryはイベントをイベントターゲットからハンドラがアタッチされている要素（つまり最も内側の要素から最も外側の要素）までバブリングし、セレクタに一致するそのパスに沿った任意の要素のハンドラを実行します。呼ばれるあなたの関数ためには

、ID '#placeBid'を持つ要素は、その子孫としてのid '#templateContainer'を持つ要素を持っている必要があります。これは委任されたイベントです。直接バインドされたイベントを探しているようですので、パラメータから'#templateContainer'を削除すると、クリックハンドラがボタンにバインドされます。しかし

$('#placeBid').on('click', function() { 
    console.log('Clicked place bid') 
    ... 
})