jquery on Click 事件在使用 ajax 时不起作用

jquery on click event doesn't work when using ajax

本文关键字：ajax 不起作用 on Click 事件 jquery      更新时间：2023-09-26

我正在做一个ajax从我的谷歌驱动器上的电子表格中提取信息，然后使用以下代码以HTML显示它们：

我有这个 HTML：

        <section class="p-booking" id="booking">
            <div class="container">
                <div class="row">
                    <div class="event-box">
                        <!-- caixas puxados do drive -->
                    </div>
                </div>
        </section>

而这个JS：

$.getJSON(url, function (data) {

var caixasEvento = [];
caixasEvento.push('<div class="col-md-3">');
caixasEvento.push('<div data-id="' + something + '" class="box">');
caixasEvento.push('<h1 class="day">' + something + '</h1>');
caixasEvento.push('<h1 class="local">' + something + '</h1>');
caixasEvento.push('<img class="local-img" src="' + image + '">');
caixasEvento.push('</div>');
caixasEvento.push('</div>');
$('.event-box').append(caixasEvento.join(''));
});

然后，每当有人单击该框时，我都需要警报：

$('.box').on('click', function() {
    alert('test')
});

我在 html 文档的底部使用脚本链接标签。

该框通常显示所有驱动器信息。

它不起作用。我相信这是一个与 ajax 相关的问题，因为如果我使用 'box' 类创建一个div，警报就会起作用。

我猜这是因为当您尝试设置侦听器时页面上不存在 box 元素。试试这个：

$('.event-box').on('click', '.box', function() {
  // do stuff here
});

试试这个：

 $('.box').each(function()
 {
     $(this).click(clickHandler);
 });

 function clickhandler()
 {
      alert('test')
  }
相关文章：