Javascript JQuery动态按钮

我有一个输入框。我输入搜索词并返回值。我试图做的是单击带有附加值的动态按钮。但是，当我单击按钮时，它会重新加载页面，而不是显示警报框。这只发生在动态按钮而不是搜索按钮上

$(document).ready(function () {
        $('.cta-button').click(function () {
            event.preventDefault();
            alert("You clicked the button");
        });

        $('#searchButton').click(function () {
            event.preventDefault();
            var varSearch = $('#searchDB').val();
            if (!varSearch) {
                $('#result').html("Please enter a search term");
                return;
            }
            $.ajax({
                contentType: "application/json; charset=utf-8",
                data: 'ID=' + varSearch,
                url: "getTest.ashx",
                dataType: "json",
                success: function (data) {
                    var result = '';
                    $.each(data, function (index, value) {
                        result += '' +
                            '<div class="main-area bg-white">' +
                            '<div class="row">' +
                                '<div class="medium-6 columns">' +
                                    '<button type="submit" id="OfferID_' + index + '" class="cta-button cta-button-icon">Add to Cart</button>' +
                                    '<br />' +
                                '</div>' +
                            '</div>' +
                            '</div>'
                    });
                    if (!result) {
                        result = 'No data were found for ' + varSearch;
                    };

                    $('#result').html(result);
                }
            });
        });
    });


<section>
    <div class="row">
        <div class="medium-4 columns medium-centered">
            <div class="search-rewards">
                <input type="search" id="searchDB" />
                <button type="submit" id="button" class="button"></button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="medium-6 columns medium-centered">
            <div id="result">

            </div>
        </div>
    </div>
</section>

$（文档）.ready（函数（）{
$（'.cta按钮'）。单击（函数（）{
event.preventDefault（）；
警报（“您单击了按钮”）；
});
$（“#搜索按钮”）。单击（函数（）{
event.preventDefault（）；
var varSearch=$（'#searchDB'）.val（）；
if（！varSearch）{
$（'#result'）.html（“请输入搜索词”）；
返回；
}
$.ajax({
contentType:“应用程序/json；字符集=utf-8”，
数据：“ID=”+varSearch，
url:“getTest.ashx”，
数据类型：“json”，
成功：功能（数据）{
var结果=“”；
$.each（数据、函数（索引、值）{
结果+=“”+
'' +
'' +
'' +
“添加到购物车”+
“
”+
'' +
'' +
''
});
如果（！结果）{
结果='未找到'+varSearch'的数据；
};
$（'#result'）.html（result）；
}
});
});
});

使用委托将单击属性分配给动态按钮。

您的

单击功能缺少
事件
参数。没有它，
event.preventDefault（）
什么也不做

$('.cta-button').click(function(event) {
    event.preventDefault();
    alert("You clicked the button");
});

更新
要绑定到动态按钮，您需要使用@MACMAN建议的委托：

$(document).on('click', '.cta-button', null, function(event){
    event.preventDefault();
    alert("You clicked the button"); 
});

有时JQuery事件不适用于动态生成的元素。可以对动态生成的元素使用JQuery.on（）


试试这个


$（'.cta按钮'）。在（“单击”、（函数（）上）{
event.preventDefault（）；
警报（“您单击了按钮”）；
})；
从
type=“submit”
更改为
type=“button”
@Dave我也试过了。它不起作用。没什么区别，页面仍然会重新加载，并且没有显示警告框。你可以用绑定到的HTML编辑你的问题吗？如果你试图绑定到动态按钮，那么正如@MACMAN所建议的，你还需要使用一个委托。这个解决方案有效，我投了赞成票。但是，rather与捕获并取消提交事件相比，最好只使用不需要取消事件的更合适的按钮类型。将
type=“submit”
更改为
type=“button”
将无需拦截提交事件。