Question

我是一个测验包的创造者，我正在使用ajax在提交时加载一个新的问题表单。问题是ajax只工作一次当我点击下一步我有一个新表格，但后来我继续使用旧表格。

任何帮助？

这是我的观看代码：

<form method="post" class="ajax"> 
    <div id="form_body">

        {% include 'MoocBundle:Quiz:form.html.twig' with {'form': form} %}
    </div>   

</form>
<script type="text/javascript" src="{{ asset('bundles/mooc/js/jquery-2.1.4.min.js') }}"></script>
<script>
$(document).ready(function(){
        $( ".next" ).on("click", function(e) {

         e.preventDefault();

            $.ajax({
                type: $(this).attr('method'),
                url: "{{ path('quiz_show_next',{'id' : 1}) }}",
                cache: false,

                success: function (data) {
                     $('#form_body').html(data);
                  }
            });
            return false;
        }
        ); 
    });


</script>

我的控制器动作（我每次都在创建一个新表单）

public function nextAction(Request $request , $id )
{
        $em = $this->getDoctrine()->getManager();
        $quiz = $em->getRepository('MoocBundle:Quizz')->findOneById($id);
        $this->i++;

        $question = $quiz->getQuestions()->get($this->i);


        $form = $this->createCreateForm($question);
        return $this->render('MoocBundle:Quiz:takeQuiz.html.twig', array('form' => $form->createView()));

}

Answer 1

如果public IHttpActionResult Update(int id){ var rawBody = Request.Content.ReadAsStringAsync().Result; Dictionary<string, string> rawProduct = JsonConvert .DeserializeObject<Dictionary<string, string>>(rawBody); var product = JsonConvert.DeserializeObject<Product>(rawBody); rawProduct.Remove("Id"); var currentProduct = dbContext.Products.Find(product.Id); foreach(var p in product.GetType().GetProperties()){ if(rawProduct.ContainsKey(p.Name)) { p.SetValue(currentDocument, p.GetValue(document)); } } dbContext.SaveChanges(); }位于.next内，请使用#form_body。变化：

event delegation

要：

$( ".next" ).on("click", function(e) {

每次加载ajax内容时，您都要替换$('#form_body').on('click', '.next', function(e) {。由于ajax加载的.next在DOM准备就绪时不存在，因此为原始.next触发的相同代码不会触发，除非您使用事件委派。

Answer 2

对于动态元素，始终绑定父项

上的事件侦听器

这是＆＃39;点击＆＃39;的一个例子。事件监听器＆＃34;＃form_body＆＃34;每个＆＃39; .next＆＃39;的元素元素是他的后代。

$("#form_body").on("click", ".next", function(e) {
    // ...
}

jquery ajax只工作一次

2 个答案:

对于动态元素，始终绑定父项