Jquery按钮单击事件未触发

Gre*_*rep 35 html javascript ajax jquery

看起来像一个简单的问题,但其他问题的解决方案似乎并不适用于我.

尝试从按钮单击触发AJAX请求,但似乎没有触发.

示例HTML

<button class="remove_weight_button" id="15">x</button>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

$(".remove_weight_button").click(function(){
    var button_id = $(this).attr("id");
    $.ajax({
        type: "POST",
        url: "weight_tracker_process.php",
        data: {
            weight_id: button_id,
            action: "remove"
        },
        success: function(){
            getWeightData();
        },
        error: function(){
            alert("data removal error");
        }
    });
    return false;
});
Run Code Online (Sandbox Code Playgroud)

Llo*_*nks 104

你的代码在小提琴中工作得很好.在初始页面加载后,您的按钮是通过AJAX动态呈现的吗?

使用

$(document).on("click", ".remove_weight_button", function(){
Run Code Online (Sandbox Code Playgroud)

代替

$(".remove_weight_button").click(function(){
Run Code Online (Sandbox Code Playgroud)

  • @ user2803072您正在使用的".click"事件仅查找在初始页面加载期间绘制的元素."on"事件查找页面当前状态中的元素 (9认同)
  • 或者`$(".remove_weight_button").live("click",function(){...`如果页面是动态加载的,你使用的是*旧版本的jQuery.关键是`click` doesn注意动态加载的DOM元素. (4认同)
  • +1,我不知道`$(document).on`.新招数! (3认同)
  • 啊,当然,是的,你是对的,它是由ajax加载的.以上如何解决这个问题? (3认同)
  • 这个解决方案救了我..我正试着用JQuery发起一个事件1个小时而无法做到. (3认同)
  • @ Mike.MKrallaProductions你对父/子关系感到困惑.`document`是上例中的父元素.它可以是封装`.remove_weight_button`的任何元素. (3认同)
  • @LloydBanks,你的解释实际上是不正确的.您可能想要阅读[事件委托](https://api.jquery.com/on/#direct-and-delegated-events).此代码特别适用于selector参数(on方法中的第二个参数).您可以轻松创建一个证明您的解释错误的示例:$(".remove_weight_button").on("click",function(){...}).正如你所说,'on'方法不是"寻找页面当前状态中的元素".事件只是绑定到文档,然后"委托"到选择器".remove_weight_button"元素. (2认同)