發布jQuery附加的動態輸入

Question

我發現了多個相同的問題，其中包括：

大多數問題是由於在table / div中打開表單或HTML的其他問題引起的。 我不相信我有這些問題。 我懷疑需要調整我的JavaScript。

我這樣使用jQuery：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>

單擊添加鏈接后，新表行將附加到tbody.newRow
單擊.remove ，要求您進行確認。 確認后，該行將被刪除。
當input.Value失去焦點時，通過Ajax提交表單。

jQuery的：

$(document).ready(function() {
  $(".add").on('click', function() {
    $("tbody.newRow").append(
      '<tr><td><input type="text" name="NewJobLeviesId[]" class="JobLeviesId" /><input type="text" name="NewValue[]" class="Value" /><input type="text" name="MasterId[]" class="Values" /><input type="text" name="LUPChoiceId[]" class="Values" /><input type="text" name="SortOrder[]" class="Values" /></td><td class="removeSelection"><a href="#" class="remove">Remove</a></td></tr>'
    );
  });
  $("tbody").on('click', '.remove', function() {
    $(this).parent().append($(
      '<div class="confirmation"><a href="#" class="removeConfirm">Yes</a><a href="#" class="removeCancel">No</a></div>'
    ))
    $(this).remove();
  });
  $("tbody").on('click', '.removeConfirm', function() {
    $(this).parent().parent().parent().remove();
  });
  $("tbody").on('click', '.removeCancel', function() {
    $(this).parent().parent().append(
      '<a href="#" class="remove">Remove</a>');
    $(this).parent().remove();
  });
  var formTwo = $('.ajaxTwo'); // contact form
  // form submit event
  $(".Value").blur(function() {
    $.ajax({
      type: 'POST', // form submit method get/post
      dataType: 'html', // request type html/json/xml
      data: formTwo.serialize(), // serialize form data 
      success: function(data) {
        url: 'functions.php'; // form action url
      },
      error: function(e) {
        console.log(e)
      }
    });
  });
});

html表單。 Ajax與未動態添加的現有行完美配合。 添加行位於表格頁腳中，看起來很漂亮。 表單以數組形式發布。

<form class="ajaxTwo" method="post">
    <table>
    <tbody class="newRow">
        <tr>
          <td>
              <input type="text" name="NewJobLeviesId[]" class="JobLeviesId" />
              <input type="text" name="NewValue[]" class="Value" />
              <input type="text" name="MasterId[]" class="Values" />
              <input type="text" name="LUPChoiceId[]" class="Values" />
              <input type="text" name="SortOrder[]" class="Values" />
          </td>
          <td class="removeSelection">
              <a href="#" class="remove">Remove</a>
          </td>
        </tr>
    </tbody>
   <tfoot>
        <tr>
           <td>
               <a href="#" class="add">Add Row</a>
           </td>
        </tr>
    </tfoot>
    </table>
</form>

最后的PHP。 每行都使用PDO准備好的語句插入到我的數據庫表中。

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
    if(isset($_POST['NewJobLeviesId'])) {
        for($i=0; $i<count($_POST['NewJobLeviesId']); $i++) {
          $NewJobLeviesId = $_POST['NewJobLeviesId'][$i];
          $NewValue = $_POST['NewValue'][$i];
          $MasterId = $_POST['MasterId'][$i];
          $LUPChoiceId = $_POST['LUPChoiceId'][$i];
          $SortOrder = $_POST['SortOrder'][$i];
          $sql = "INSERT INTO joblevies (JobLeviesId,Value,MasterId,LUPChoiceId,SortOrder) VALUES (:JobLeviesId,:Value,:MasterId,:LUPChoiceId,:SortOrder)";
        $q = $db->prepare($sql);
        $q->execute(array(':JobLeviesId'=>($NewJobLeviesId),':Value'=>($NewValue),':MasterId'=>($MasterId),':LUPChoiceId'=>($LUPChoiceId),':SortOrder'=>($SortOrder)));
        }
    }
}

再次，這很好地工作。 只有動態添加的輸入才有問題。 我想念什么？

Answer 1

動態創建的dom元素沒有在$(document).ready(...上附加的任何事件，因為在附加事件時它們還不存在，因此$('.Value').blur(...東西只會附加到第一種形式，而不會附加到將來的形式。因此，每次創建新行時都附加事件，所以可能是這樣的：

首先，將綁定操作委托給它自己的功能

function attachSubmitEvent() {
    // form submit event
    //remove old events first
    $(".Value").off();
    $(".Value").blur(function () {
        var formTwo = $('.ajaxTwo'); // contact form
        $.ajax({
            type: 'POST', // form submit method get/post
            dataType: 'html', // request type html/json/xml
            data: formTwo.serialize(), // serialize form data 
            success: function (data) {
                url: 'functions.php'; // form action url
            },
            error: function (e) {
                console.log(e)
            }
        });
    });
}

然后在您的document.ready中，調用該函數

attachSubmitEvent();

然后，要確保它們也附加到新元素上，請在創建新元素時再次調用它

$(".add").on('click', function () {
$("tbody.newRow").append('<tr><td><input type="text" name="NewJobLeviesId[]" class="JobLeviesId" /><input type="text" name="NewValue[]" class="Value" /><input type="text" name="MasterId[]" class="Values" /><input type="text" name="LUPChoiceId[]" class="Values" /><input type="text" name="SortOrder[]" class="Values" /></td><td class="removeSelection"><a href="#" class="remove">Remove</a></td></tr>');
attachSubmitEvent(); //now everyone has the event attached.
});

Answer 2

對於您的表單提交事件，請嘗試：

$("tbody").on('focusout', '.Value', function() {
    ...
});

您也可以在此事件處理程序中使用blur處理，但是文檔為了清晰起見建議使用focusout （請參閱jQuery on（）方法文檔的“ Additional Notes”部分： http : //api.jquery.com/on/ ）

發布jQuery附加的動態輸入

問題描述

2 個解決方案

解決方案1
1 已采納 2013-11-25 02:05:24

解決方案2
1 2013-11-25 02:06:16

發布jQuery附加的動態輸入

問題描述

2 個解決方案

解決方案1 1 已采納 2013-11-25 02:05:24

解決方案2 1 2013-11-25 02:06:16

解決方案1
1 已采納 2013-11-25 02:05:24

解決方案2
1 2013-11-25 02:06:16