$（document）.on（“ click”，不能按预期运行

Question

这是我第一次在Stack Overflow上发帖，所以我去了。

这是我正在尝试使用jQuery / AJAX的HTML代码，我得到了一个DIV，其中包含所有购买选项，带有3个按钮/表格的可用不同选项，以及AJAX调用，分别加载了更多项目购买具有相同HTML格式的按钮和选项。

<div class="purchase_options">
    <form class="purchbox" method="post">
        <a class="purchase1" href="#">$24.95</a>
        <a class="text">MP3</a>
    </form>

    <form class="purchbox" method="post">
        <a class="purchase2" href="#">$39.95</a>
        <a class="text">WAV</a>
    </form>

    <form class="purchbox" method="post">
        <a class="purchase3" href="#">$99.95</a>
        <a class="text">Premium</a>
    </form>

    <a href="#">LOAD MORE</a>
</div>

我当前面临的问题是，使用以下功能，无论我单击链接，文本，表格的形式如何，该功能都能正常运行。

代码段1

(function($) {
$('.purchbox').on('click', function () {
    //CODE
    });
;
}(jQuery));

但是为了将事件添加到动态加载的AJAX内容中，您必须将这些事件链接到（document）.ready 和 $（document）.on（“ click”）就像下面的示例一样。

代码段2

jQuery(document).ready(function($) {
    $( document ).on( "click", ".purchbox", function() {
        //CODE
    } );
});

它确实有效，但是仅当您按原样单击表单对象，单击超链接，段落或该表单内的任何内容时，该函数才起作用。我对该主题进行了深入研究，但找不到可行的解决方案。

为了以更加图形化的方式显示问题，我在两个代码段中附加了执行该功能的可点击区域的图像。

代码段1

（无论您在哪里单击代码，都将执行）

代码段2

（如果您单击蓝色部分，代码将不会执行，我也不会明白为什么，但是，如果您按原样单击“ .purchbox”表单，则会被执行）

非常感谢您。