preventDefault工作一次，.on根本不起作用

Question

我正在尝试处理一些尝试模拟for循环并停止在每个元素中的结果，直到用户决定如何处理它。问题是，我正在尝试使用event.preventDefault来避免表单提交，这是第一次使用，但是如果我再次使用另一个按钮，它只是跳过它并发送表单。

我已经读过使用.on（）[委托已被弃用]并尝试过它，但我想我做错了，因为它甚至没有第一次工作。

<script>
    $(function() {
        //alert('era');
        var items = {{partial_results|length}};
        var current_item = {{current_item}};
        alert("current_item " + current_item);
        alert("items " + items);
        var project = {{project.id}}

        for (var i = items; i > current_item; i--) {
            $('#partial-' + i).hide();
        }

        $("#add-button-" + current_item).hide();
        $('#create-button-' + current_item).hide();


        var site_id = 'none';
        $("input:radio:checked").data("chk", true);
        $("input:radio").click(function() {
            //     alert("radio " +current_item);
            $("input[name='site-" + current_item + "']:radio").not(this).removeData("chk");
            //$("input[name='site-" + current_item + "']:radio").not(this).prop('checked', false);
            //$(this).prop;
            $(this).data("chk", !$(this).data("chk"));
            $(this).prop("checked", $(this).data("chk"));
            if ($("input:radio[name='site-" + current_item + "']").is(":checked")) {
                site_id = $(this).val();
                //     alert('checked '+current_item);
                $("#add-button-" + current_item).show();
                $('#create-button-' + current_item).hide();
            } else {
                //    alert('unchk '+current_item);
                $('#create-button-' + current_item).show();
                $("#add-button-" + current_item).hide();
            }
        });
        $('#add-button-' + current_item).on("click", "input", function(event) {
            //  $('#add-button-' + current_item).click(function(event) {
            alert('add');
            event.preventDefault();
            // alert(site_id);
            var data = {
                current_it: current_item,
                site_id: site_id,
                project_id: project,
                site_info: $('#site-to-' + current_item).serializeArray()
            };
            $.ajax({
                type: 'post',
                url: '{{ path("project_associate_site") }}',
                data: data,
                success: function(data) {
                    alert('success');
                    alert("current_item response " + current_item++);
                    for (var i = items; i > current_item; i--) {
                        $('#partial-' + i).hide();
                        alert("i #partial-" + i + ".hide()");
                    }
                    for (var j = 1; j < current_item; j++) {
                        $('#partial-' + j).hide();
                        alert("J partial-" + j + "hide()");
                    }
                    $('#partial-' + current_item).show();
                    $("#add-button-" + current_item).hide();
                    $('#create-button-' + current_item).hide();
                    alert("current_item response end" + current_item);
                    if (current_item > items) {
                        alert('>>');
                        window.location.href = "{{ path('project_show', { 'id': project }) }}";
                    }
                }
            });
        });
        $('#create-button-' + current_item).on("click", "input", function(event) {
            // $('#create-button-' + current_item).click(function(event) {
            alert('#create-button-' + current_item);
            event.preventDefault();
            alert('prevented');
            var data = {
                current_it: current_item,
                site_info: $('#site-to-' + current_item).serializeArray()
            };
            $.ajax({
                type: 'post',
                url: '{{ path("site_create_processing") }}',
                data: data,
                success: function(data) {
                    alert('success');
                    alert("current_item response " + current_item++);
                    for (var i = items; i > current_item; i--) {
                        $('#partial-' + i).hide();
                        alert("i #partial-" + i + ".hide()");
                    }
                    for (var j = 1; j < current_item; j++) {
                        $('#partial-' + j).hide();
                        alert("J partial-" + j + "hide()");
                    }
                    $('#partial-' + current_item).show();
                    $("#add-button-" + current_item).hide();
                    $('#create-button-' + current_item).hide();
                    alert("current_item response end" + current_item);
                    if (current_item > items) {
                        alert('>>');
                        window.location.href = "{{ path('project_show', { 'id': project }) }}";
                    }
                }
            });
        });
    });
    </script>
    <div id="content">
        <div class="page-full-width cf">
            <div class="content-module">
                <div class="content-module-heading cf">
                    <ul class="temporary-button-showcase">
                        <li><a href="{{ path ('project') }}" class="button round blue image-right ic-left-arrow text-upper">Back</a></li>
                    </ul>
                </div>
                <div class="content-module-main">
                    {% if error == 1 %}
                           {# <div class="error-box" align="center"> {{error_message}} </div> #}
                        <div align="center">
                            <br>
                            <br>
                            <h2>{{error_message}}</h2>
                        </div>
                    {% else %}
                           {% if partial_results|length %}
                            {% set i = 0 %}
                           {% for p_result in partial_results %}
                            <div id="partial-{{loop.index}}">
                                {% set i = i + 1  %}                     {# site #}
                                        <h1>Partial Matches:</h1>
                                        <form action="#pmatch" method="POST" {{ form_enctype(form) }}>

                                                        <div align="center">
                                                            <input type="submit" value="Add Site to Project" class="round blue ic-add" id="add-button-{{i}}">
                                                            <input type="submit" value="Create new Site" class="round blue ic-right-arrow" id="create-button-{{i}}">
                                                        </div>
                                                    </form>
                                                </div>
                        {% endfor %}
                                {% endif %}
                                                </div>
                                   {% endif %}
                                            </div>
                                        </div>
                                    </div>
{% endblock %}

请忽略“怪异”语法，因为我正在使用Twig来管理模板。 这个想法是，根据用户点击创建新项目或添加到项目，它应该执行该位代码，然后返回并显示下一个结果。单击其中任何一个都可以很好地工作，当问题显示下一个元素并且您尝试执行相同操作时问题就出现了。

提前谢谢你。

P.D：你可以看到.click和.on（其中一个被评论）

Answer 1

如果就绪状态$('#create-button-' + current_item)可用：

$('#create-button-' + current_item).on("click", function(event) {
  //TODO
}

应该找不到。

如果$('#create-button-' + current_item)无法使用就绪状态，请尝试：

$(document).on("click", '#create-button-' + current_item, function(event) {
  //TODO
}

---

另一种解决方案可能是提供所有相同的东西来绑定click和class，并执行以下操作：

$('.className').on("click", function(event) {
  //TODO
}

或

$(document).on("click", '.className', function(event) {
  //TODO
}

---

更新：

您的JS仅绑定current_item。因此，如果您的current_item等于0，则#create-button-0只会click与$('.btn-add').on("click", function(e) { e.preventDefault(); var index = $(this).parent().find('.selection-value').val(); alert('add'); var data = { current_it: index, site_id: site_id, project_id: project, site_info: $('#site-to-' + index).serializeArray() }; $.ajax({ type: 'post', url: '{{ path("project_associate_site") }}', data: data, success: function(data) { alert('success'); alert("index response " + index++); for (var i = items; i > index; i--) { $('#partial-' + i).hide(); alert("i #partial-" + i + ".hide()"); } for (var j = 1; j < index; j++) { $('#partial-' + j).hide(); alert("J partial-" + j + "hide()"); } $('#partial-' + index).show(); $("#add-button-" + index).hide(); $('#create-button-' + index).hide(); alert("index response end" + index); if (index > items) { alert('>>'); window.location.href = "{{ path('project_show', { 'id': project }) }}"; } } }); }); $('.btn-create').on("click", function(e) { event.preventDefault(); var index = $(this).parent().find('.selection-value').val(); alert('create'); var data = { current_it: index, site_info: $('#site-to-' + index).serializeArray() }; $.ajax({ type: 'post', url: '{{ path("site_create_processing") }}', data: data, success: function(data) { alert('success'); alert("index response " + index++); for (var i = items; i > index; i--) { $('#partial-' + i).hide(); alert("i #partial-" + i + ".hide()"); } for (var j = 1; j < index; j++) { $('#partial-' + j).hide(); alert("J partial-" + j + "hide()"); } $('#partial-' + index).show(); $("#add-button-" + index).hide(); $('#create-button-' + index).hide(); alert("index response end" + index); if (index > items) { alert('>>'); window.location.href = "{{ path('project_show', { 'id': project }) }}"; } } }); }); 绑定。我添加了我认为可能对你的按钮有帮助的东西。如果它离开某处，请告诉我。

JS for buttons：

<div id="content">
<div class="page-full-width cf">
    <div class="content-module">
        <div class="content-module-heading cf">
            <ul class="temporary-button-showcase">
                <li><a href="#" class="button round blue image-right ic-left-arrow text-upper">Back</a></li>
            </ul>
        </div>
        <div class="content-module-main">
            <div id="partial-0">
                <h1>Partial Matches:</h1>
                    <form action="#pmatch" method="POST">
                        <div align="center">
                            <input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
                            <input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
                            <input type="hidden" class="selection-value" value="0" />
                        </div>
                    </form>
                </div>
            </div>
            <div id="partial-1">
                <h1>Partial Matches:</h1>
                    <form action="#pmatch" method="POST">
                        <div align="center">
                            <input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
                            <input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
                            <input type="hidden" class="selection-value" value="1" />
                        </div>
                    </form>
                </div>
            </div>
            <div id="partial-2">
                <h1>Partial Matches:</h1>
                    <form action="#pmatch" method="POST">
                        <div align="center">
                            <input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
                            <input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
                            <input type="hidden" class="selection-value" value="2" />
                        </div>
                    </form>
                </div>
            </div>
            <div id="partial-3">
                <h1>Partial Matches:</h1>
                    <form action="#pmatch" method="POST">
                        <div align="center">
                            <input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
                            <input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
                            <input type="hidden" class="selection-value" value="3" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

HTML PARSED：

<div id="content">
    <div class="page-full-width cf">
        <div class="content-module">
            <div class="content-module-heading cf">
                <ul class="temporary-button-showcase">
                    <li><a href="{{ path ('project') }}" class="button round blue image-right ic-left-arrow text-upper">Back</a></li>
                </ul>
            </div>
            <div class="content-module-main">
                {% if error == 1 %}
                       {# <div class="error-box" align="center"> {{error_message}} </div> #}
                    <div align="center">
                        <br>
                        <br>
                        <h2>{{error_message}}</h2>
                    </div>
                {% else %}
                       {% if partial_results|length %}
                        {% set i = 0 %}
                       {% for p_result in partial_results %}
                        <div id="partial-{{loop.index}}">
                            {% set i = i + 1  %}                     {# site #}
                                    <h1>Partial Matches:</h1>
                                    <form action="#pmatch" method="POST" {{ form_enctype(form) }}>

                                                    <div align="center">
                                                        <input type="submit" value="Add Site to Project" class="btn-add round blue ic-add">
                                                        <input type="submit" value="Create new Site" class="btn-create round blue ic-right-arrow">
                                                        <input type="hidden" class="selection-value" value="{{i}}" />
                                                    </div>
                                                </form>
                                            </div>
                    {% endfor %}
                            {% endif %}
                                            </div>
                               {% endif %}
                                        </div>
                                    </div>
                                </div>
{% endblock %}

HTML BLOCK

{{1}}

Answer 2

您的任何按钮中是否有任何输入元素？删除输入标记可能会解决您的问题。

例如：

$('#add-button-' + current_item).on("click", function(event){ ...

选中此项jquery doc on .on 。

这里还附有一​​个jsfiddle，以便您可以检查不同的位置。

JSFiddle click here.....