注冊事件處理程序以動態添加內容

Question

因此，我有幾個文件：

-- model      -- step1.php
              -- step2.php
-- view       -- main.php
              -- step1.php
              -- step2.php
-- controller -- step1.php
              -- step2.php

現在基本上我想做的是從main.php調用step1視圖：

$(document).ready(function(){
    $("#MyForm").validate({
        submitHandler: function(form) {
            $.post('../controller/step1.php', $("#MyForm").serialize(), function(data) {
                $('#step1_controller').html(data);
            });
        }
    });
});

這可行，但是當您在main.php中提交表單時，將執行step1控制器並加載step2視圖。

問題是，當我通過此ajax請求加載step2視圖時，step2視圖不再能夠加載step2控制器。 但是，當我在瀏覽器中打開step2視圖時，一切正常，並且step2控制器已加載。

main.php->加載step2.php->加載step2控制器

• main.php成功加載step2視圖

• step2視圖已成功加載step2控制器

• 但是main.php無法加載step2控制器

我知道這有點令人困惑，但是如果有人可以幫助我，我將非常感激。

無論如何，使用這些動態ajax加載的安裝步驟的所有這些頁面如何工作？

您知道，您在步驟1中填寫了一個表格，單擊提交，步驟2顯示，填寫了一個表格，提交步驟3顯示。 最好的方法是什么？

第二步視圖：

<script>
$(document).ready(function(){
    $("#Foo").validate({
        submitHandler: function(form) {
                $.post('../controller/step2.php', $("#Foo").serialize(), function(data) {
                $('#results_step2').html(data);
            });
        }
    });
});
</script>


<h1 class="header_step2">Lorem</h1>

<p />

<form name="Foo" id="Foo" action="" method="POST" enctype="multipart/form-data">
<select size="1" name="Bar">
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
</select>

<button type="submit">
<div id="results_step2"> Save </div>
</button>
</form>

Answer 1

您的代碼無法正常工作的原因是，在加載view2時document.ready已經發生。

快速解決方案是將驗證偵聽器附加到呈現相應表單的成功回調中。 這將允許您從view2中刪除JavaScript。 理想情況下，您最終可能會希望以不同的方式組織代碼以減輕這種痛苦。 很高興能夠將javascript與html分開。

同時，以下應解決您的問題：

選項1

$(document).ready(function(){

    var attachFooValidation = function() {
        $("#Foo").validate({
            submitHandler: function(form) {
                $.post('../controller/step2.php', $("#Foo").serialize(), function(data) {
                    $('#results_step2').html(data);
                });
            }
        });
    }

    $("#MyForm").validate({
        submitHandler: function(form) {
            $.post('../controller/step1.php', $("#MyForm").serialize(), function(data) {
                $('#step1_controller').html(data);
                attachFooValidation();
            });
        }
    });
});

選項2

如果您不想這樣做，也可以從view2中丟失document.ready並將腳本移到表單后，如下所示：

<h1 class="header_step2">Lorem</h1>

<p />

<form name="Foo" id="Foo" action="" method="POST" enctype="multipart/form-data">
<select size="1" name="Bar">
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
</select>

<button type="submit">
<div id="results_step2"> Save </div>
</button>
</form>

<script>
$("#Foo").validate({
    submitHandler: function(form) {
            $.post('../controller/step2.php', $("#Foo").serialize(), function(data) {
            $('#results_step2').html(data);
        });
    }
});
</script>

也就是說，我建議重新組織代碼以將腳本與標記分開。

Answer 2

您需要閱讀將偵聽器綁定到Javascript（jQuery）中的事件的方法，以便正確處理通過ajax加載的新元素

基本上，所有代碼都位於document.ready塊中，該塊僅在頁面加載時運行。 此時，您的第2步表單不存在，因此也沒有綁定Javascript事件

就像是

$("#MyForm").on('submit', function() {
   $(this).validate({
       // your code here
   });
});

會將ID為#MyForm的所有表單的Submit事件綁定到驗證代碼