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模板中

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

document.ready函数中的

日志console.log($('#placeBid'))显示正在检测元素，并且在附加onclick处理程序时，但是单击该按钮不会记录Clicked place bid

可能是什么问题？感谢

Answer 1

我认为你误用了jquery的on函数。

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

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

为了调用您的函数，标识为'#placeBid'的元素必须具有标识为'#templateContainer'的元素作为其后代。这是一个委托事件。看来你正在寻找一个直接绑定的事件，所以从参数中删除'#templateContainer'，点击处理程序将绑定到按钮。

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

点击侦听器上的JQuery在使用JsRender呈现html后未触发

1 个答案: