我该如何委托这个活动

时间:2016-01-15 12:05:41

标签: jquery html delegates event-handling

伙计们我刚刚尝试新的事件委托并实施了部分代码,但这是我面临问题的一​​部分,它没有以需求方式响应,可能是因为它附加了另一个事件。 看看 -

$(document).ready(function() {
  $('#divGrid').on("click", ".edit_tr", function() {
    //$(".edit_tr").click(function()

    var ID=$(this).attr('id');

    $("#client_"+ID).hide();
    $("#staff_"+ID).hide();
    $("#matter_"+ID).hide();
    $("#client_input_"+ID).show();
    $("#staff_input_"+ID).show();
    $("#matter_input_"+ID).show();
  })
  .change(function() {
    var ID=$(this).attr('id');
    var client=$("#client_input_"+ID).val();
    var staff=$("#staff_input_"+ID).val();
    var matter=$("#matter_input_"+ID).val();
    var dataString = 'id='+ ID +'&clientname='+client+'&staff='+staff+'&matter='+matter;

    if(client.length>0 && staff.length>0 && matter.length>0) {
      $.ajax({
        type: "POST",
        url: "table_edit_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
          $("#client_"+ID).html(client);
          $("#staff_"+ID).html(staff);
          $("#matter_"+ID).html(matter);
        }
      });
    }
    else {
      alert('enter something');
    }

  });

  // Edit input box click action
  $(".editbox").mouseup(function() {
    return false;
  });

  // Outside click action
  $(document).mouseup(function() {
    $(".editbox").hide();
    $(".text").show();
  });
});

这是html -

<div id="divGrid">
  <table class="footable" data-filter="#filter" id="tableresult" >
    <thead>

      <th>Client name</th>
      <th>Staff name</th>
      <th>Matter</th>
      <th> Delete</th>
    </thead>
    <tr id="<?php echo $id; ?>" class="edit_tr">

      <td class="edit_td" >
        <span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
        <input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" /&gt;
               </td>

      <td class="edit_td">
        <span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span> 
        <input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
      </td>

      <td class="edit_td">
        <span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span> 
        <input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
      </td>
    </tr>
    </tbody>
  </table>
</div>

所以当我有这样的代码时我应该怎么做,我想在重新加载后保留它的属性。

0 个答案:

没有答案