Question

我在页面中有两种表单，它们是使用AJAX提交的。所以我创建了一个函数（JAVASCRIPT / JQUERY）来处理两种形式。但这不适用于第二种形式，仅适用于第一种形式。这是代码：

<div class="block-content" id="form-container">
    <div class="alert alert-success d-none" role="alert">
        SUCCESS
    </div>
    <div class="alert alert-danger d-none" role="alert">
        ERROR
    </div>
    <form action="POST">
        FORM1
        <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
    </form>
</div>

<div class="block-content" id="form-container">
    <div class="alert alert-success d-none" role="alert">
        SUCCESS
    </div>
    <div class="alert alert-danger d-none" role="alert">
        ERROR
    </div>
    <form action="POST">
        FORM2
        <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
    </form>
</div>

和Javascript：

<script type="text/javascript">
jQuery('#submitForm').click(function(e){
    e.preventDefault();
    var form = $(this).closest('form');
    var successMessage = $(this).closest('#form-container').find('.alert-success');
    var errorMessage = $(this).closest('#form-container').find('.alert-danger');
    successMessage.removeClass('d-none');
    .ajax({
        /* HANDLE AJAX */
    });
});
</script>

我在这里做错了什么？使用此代码，它应该以第二种形式显示SUCCESS消息，但没有显示。我认为问题出在mostest（）方法中，但是我不太确定。

谢谢。

Answer 1

在您的情况下，尝试将click()函数更改为on()并像这样检查文档单击；

jQuery(document).on("click", "#submitForm", function(e) {
    e.preventDefault();
    var form = $(this).closest('form');
    var successMessage = $(this).closest('#form-container').find('.alert-success');
    var errorMessage = $(this).closest('#form-container').find('.alert-danger');
    successMessage.removeClass('d-none');

})

.d-none { 
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-content" id="form-container">
    <div class="alert alert-success d-none" role="alert">
        SUCCESS
    </div>
    <div class="alert alert-danger d-none" role="alert">
        ERROR
    </div>
    <form action="POST">
        FORM1
        <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
    </form>
</div>

<div class="block-content" id="form-container">
    <div class="alert alert-success d-none" role="alert">
        SUCCESS
    </div>
    <div class="alert alert-danger d-none" role="alert">
        ERROR
    </div>
    <form action="POST">
        FORM2
        <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
    </form>
</div>

这将使它适合您

Answer 2

在此之后，我将进一步解释。

$('#clicker').click(function() {
	console.log('You clicked by ID');
})

$('.clicker').click(function() {
	console.log('You clicked by class');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='button' value='ok' id='clicker' class='clicker'>
<input type='button' value='ok' id='clicker' class='clicker'>
<input type='button' value='ok' id='clicker' class='clicker'>

看，它们都具有id答题器，但只有第一个寄存器。他们都有班级答题器，他们都工作。因为javascript希望id是唯一的。您不能责怪它：id-标识；或者像我提到的那样，您可以使用onclick旧HTML事件。上课使用它的方式本身很好。

使用Ajax处理多种表单-提交按钮ID

2 个答案: