jquery - ajax调用后函数未执行

Question

下面是一段示例代码，我正在尝试执行一个 javascript 函数
单击按钮时，它会发送一个刷新 tr 的 ajax 调用，但 openEditPage(this);在第一次刷新后不执行

<tbody>
  <g:each in="${item}" var="value">
    <tr id='tableRow"${value.id}"'>
      <td width="20"><input type="checkbox" name="tagChekBox" class="checkbox" value="${value.id}" style=""></td>
      <td>${value.Name}</td>
      <td>${value.noOfTags}</td>
      <td>
        <div class="add-remove-icon">
          <a href="#" class="icon-edit-sign edit-btn" value="editable-row${value.id}" onClick ="openEditPage(this);"></a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="editable-row" id="editable-row${value.id}"></div>
        <div>
          <input type="text" id="${value.id}" value="${value.Name}" name="tagcatName" class="margin-none" >
        </div>
        <button class="saveTagCategorButton">Save</button>
      </td>
    </tr>
  </g:each>
</tbody>

<script>
  /*this finction show the div of editable row */
  function openEditPage(object){
    var id =($(object).parent().find('a').attr('value'));
    $('#'+id).slideDown();

    return false;
  }

  $(".saveTagCategorButton").click(function(){
    jQuery.ajax({

      success: function(response,textStatus){
        var trElement=that.parent().parent().parent().parent();
        trElement .slideUp();
        trElement.prev().html(response);
      },
    });
    return false;
  });
</script>

response contains--

<tr id='tableRow"${value.id}"'>
  <td width="20">
    <input type="checkbox" name="tagChekBox" class="checkbox" value="${value.id}" style="">
  </td>
  <td>${value.Name}</td>
  <td>${value.noOfTags}</td>
  <td>
    <div class="add-remove-icon">
      <a href="#" class="icon-edit-sign edit-btn" value="editable-row${value.id}" onClick ="openEditPage(this);"></a>
    </div>
  </td>

Answer 1

您还应该稍微修改一下您的 HTML 结构和脚本，value不是 <a> 的受支持属性标签。使用id = "editable-row${value.id}"反而。

更改此行

($(object).parent().find('a').attr('value'));

有了这个

$(object).prop('id'); //this will yield the same result

HTML:

<a href="#" class="icon-edit-sign edit-btn" id="editable-row${value.id}" onClick ="openEditPage(event, this);">Link</a>

脚本:

function openEditPage(event, object){
 var id = $(object).prop('id');
 $('#'+id).slideDown();

 event.preventDefault();
}

$(function(){
$(".saveTagCategorButton").click(function(){
  jQuery.ajax({
   //other jquery ajax parameters,
    success: function(response,textStatus){
      /*
      * this is not a good approach, calling parent() to parent() again and again,
      * use something more appropriate and less complex for jQuery to parse the DOM, I would have done this but I am unsure of your requirements
      */
      var trElement = $(this).parent().parent().parent().parent();  //use 'this' instead of 'that' wrapped in jQuery.
      trElement.slideUp();
      trElement.prev().html(response);
     },
    }); 
 });       
});

再次这条线 var trElement = $(this).parent().parent().parent().parent();将得到整个 <tbody> .
return false将取消控件的默认操作，并停止绑定(bind)到该控件的进一步操作的传播。所以总是使用 event.preventDefault()如果只取消默认 Action 等 event.stopPropagation() .