Javascript 当按钮出现在ajax中时，无法触发打开（'；单击'；）

我在（'click'）事件上遇到了问题，我有一个来自

ajax

的

按钮

，它有一个

单击事件

，但是当我尝试单击它时，没有发生任何事情，在单击按钮后，预期的输出显示一个

警报

。我试着把这个按钮直接放到html上，结果成功了。有人能帮我吗

PS:

控制台

和

网络

初始化

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

function init()
{
    sendmessage();
    viewhotel();
    getresorts();
}

单击按钮时的功能

function viewhotel()
{
    $('#viewinfo').on('click', function() {
        alert('asd');
    });
} 

按钮出现的ajax代码

$output  .= '<div class="hotel-container">
                                    <div class="row">
                                        <div class="col-md-4">  
                                            <img src="admin/'.$row['main_picture'].'"class="img-responsive hotelpic">
                                        </div>

                                        <div class="col-md-5">
                                            <h5 class="hotelname">'.$row['resort_name'].'</h5>
                                            <h5 class="address"><i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;'.$row['resort_address'].'</h5>
                                        </div>

                                        <div class="col-md-3">
                                            <h5 class="price">&#8369; '.$row['resort_total_cost'].'</h5>
                     /*here's the button*/  <button class="btn btn-warning" id="viewinfo">View more info</button>
                                        </div>
                                    </div>

                                </div>';

$output.='
“.$row['resort_name']”
“.$row['resort_address']”
₱ '.$第[‘度假村总成本’]行
/*这是按钮*/查看更多信息
';

将html放在页面上（在DOM中）后，需要绑定事件

---

ajax调用成功后，调用方法“viewhotel（）”绑定事件。

将html放置在页面上（在DOM中）后，需要绑定事件

---

ajax调用成功后，调用方法“viewhotel（）”来绑定事件。

对于将来的一个元素，在ajax调用后调用

viewhotel

是有意义的，但是如果要添加多个这样的元素（或者存在一些现有元素，并且将添加更多元素），因此，将事件绑定起来更有意义：

function viewhotel()
{
    $(document).on('click', '#viewinfo', function() {
        alert('asd');
    });
}

---

通过这种方式，上的

会将事件绑定到文档中现有和未来的元素。
如果有一个未来元素，在AJAX调用后调用
viewhotel
是有意义的，但是如果要添加多个这样的元素（或者存在一些现有元素并将添加更多元素），因此，将事件绑定起来更有意义：

function viewhotel()
{
    $(document).on('click', '#viewinfo', function() {
        alert('asd');
    });
}

通过这种方式，

上的

会将事件绑定到文档中现有和未来的元素。
当您使用要附加的父div指定动态创建的按钮id时，on（'click'）事件会起作用。假设我有一个id为#traget的目标div。我将动态添加一个id为#viewinfo的按钮，然后代码将

$("#target").on("click", "#viewinfo", function(){
     /*--- Do Rest----*/
});

当您使用要附加的父div指定动态创建的按钮id时，on（'click'）事件将起作用。假设我有一个id为#traget的目标div。我将动态添加一个id为#viewinfo的按钮，然后代码将

$("#target").on("click", "#viewinfo", function(){
     /*--- Do Rest----*/
});

成功了，谢谢！简单的解释，简单的解决方案。很有效，谢谢！简单的解释，简单的解决方案。