Question

下面是一段示例代码，我正在尝试执行javascript函数按钮点击，发送ajex调用刷新tr，但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将取消控件的默认操作，并停止传播进一步操作绑定到该控件。因此，如果仅取消默认操作，则始终使用event.preventDefault()，以及event.stopPropagation()。

Answer 2

这一行： var id =($(object).parent().find('a').attr('value'));

应该是：

var id =($(object).parent().find('a').attr('id'));

Answer 3

如果我理解你的要求，

function openEditPage(object){

// Not sure why the line below is needed.
// 'id' will return you the 'object' as well.
var id =($(object).parent().find('a').attr('value'));

$('#'+id).slideDown(); // Change to $(object).slideDown();

return false;
}

ajax调用后函数未执行

3 个答案: