Question

我提出了ajax请求，以获取单击的每个按钮的名称... 然后，我想将所有URL放入“ #Container”。（URL定义具有一些代码的页面）第一次它对我有用...但是对于其他时候，我不得不重新加载页面以向我显示每个按钮的详细信息，而没有向我显示在第一个所需按钮之后单击的其他按钮的详细信息。 / p>

$(function () {
  $('button').click(function () {
    var data= $(this).val();
    $.ajax({
      url: '/myurl',
      type: 'post',
      dataType: 'json',
      data: {
        data: data
      },
      success: function (data) {
        $('#container').html(data);
      }
    });
  });
});

我该怎么办？有什么可以防止下次运行Ajax吗？

Answer 1

尝试使用$（document）.on（'click'，而不是$（'button'）。click，如下所示

$(function () {
  $(document).on('click','button',function () {    
  var data= $(this).val();
  alert(data);
  $.ajax({
    url: '/myurl',
    type: 'post',
    dataType: 'json',
    data: {data: data},
    success: function (data) {
      $('#container').html(data);}
    });
  });
});

Answer 2

由于ajax请求完成后，它会重新呈现DOM，因此您需要重新绑定ajax事件。 #container下的所有那些元素都不是DOM的虚拟部分，并且您的click事件仅适用于预先存在的元素。

尝试

将ajax事件包装在单独的函数中

function ajaxEvent(data){
 $.ajax({
    url: '/myurl',
    type: 'post',
    dataType: 'json',
    data: {data: data},
    success: function (data) {
      $('#container').html(data);
      clickEvent(); //note this function attachment I added below
    }
 });
}

您可以将click事件包装到一个函数中

function clickEvent(){
  $('button').off('click');
  $('button').on('click',function(){
     ajaxEvent($(this).val());
  });
}

现在js看起来像

<script>

$(function(){
  clickEvent();
});

function ajaxEvent(data){
 $.ajax({
    url: '/myurl',
    type: 'post',
    dataType: 'json',
    data: {data: data},
    success: function (data) {
      $('#container').html(data);
    }
 });
}

function clickEvent(){
  $('button').off('click');
  $('button').on('click',function(){
     ajaxEvent($(this).val());
  });
}

</script>

我还看到您正在将ajax数据作为$('button').val()传递，这是不正确的。如果要将数据发送到服务器，请使用输入类型的文本。

成功后调用ajax

2 个答案: