点击事件的jquery在使用ajax时不起作用

时间:2014-11-24 18:26:01

标签: javascript jquery ajax

我正在使用ajax从我的google驱动器上的电子表格中提取信息,然后使用以下代码以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,警报就会起作用。

2 个答案:

答案 0 :(得分:1)

我猜测这种情况正在发生,因为当您尝试设置侦听器时,页面元素不存在于页面上。试试这个:

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

答案 1 :(得分:0)

试试这个:

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


 function clickhandler()
 {
      alert('test')
  }