当我按照一段代码提交表单时(在-$('.pru-enroll-cb').each(function(e) )
块下执行两次。正如其他类似帖子所建议的那样,我尝试使用e.stopImmediatePropagation(); e.preventDefault();
。这导致其余的不执行部分代码有$ .ajax方法。
function enroll_student() {
var studentId=$('#pru-enroll-selected-student-id').val();
var examArr = [];
var counter = 0;
$('.pru-enroll-cb').each(function(e)
{
var examId = $(this).attr("data-examId");
var checkStatus = $(this).prop("checked");
examArr[counter++]=examId;
examArr[counter++]=checkStatus;
alert('called-1');
/* e.stopImmediatePropagation();
e.preventDefault(); */
});
var formData = {
action: 'pru_enroll_student',
prustudentId : studentId,
examDataArr: examArr,
enrollNonce: $('#pru-enroll-nonce').attr("data-nonce")
};
$('.pru-student-enroll-form').on('submit', function (e) {
$.ajax({
type : "POST",
dataType : "json",
url : pruAjax.ajaxurl,
data : formData,
success: function (response) {
var msgHtml = '<p class="'+"pru_success_msg woocommerce-message"+ '">'+response.message+'</p>';
$("#pru-msg-panel").html(msgHtml);
},
});
});
jQuery(this).hide();
return false;
}
相关的html如下:
可用的考试
<table class = "table">
<thead class="pru_title">
<tr>
<th>Examination</th>
<th>Start</th>
<th>End</th>
<th>Price(E)</th>
<th>Duration(Min.)</th>
<th>Enroll</th>
</tr>
</thead>
<tbody class="pru_title_value">
<tr>
<td>
<strong>
<span id="pru-thumbnail-img-size">
<img width="391" height="300" src="http://localhost:8888/wordpress/wp-content/uploads/2016/10/IQTest-Pangea.png" class="attachment-51 size-51 wp-post-image" alt="iqtest-pangea" title="iqtest-pangea" srcset="http://localhost:8888/wordpress/wp-content/uploads/2016/10/IQTest-Pangea.png 391w, http://localhost:8888/wordpress/wp-content/uploads/2016/10/IQTest-Pangea-300x230.png 300w" sizes="(max-width: 391px) 100vw, 391px" /> </span>
7th Grade English Test
</strong>
</td>
<td>2017-01-30 00:00:00</td>
<td>2016-10-31 00:00:00</td>
<td>5</td>
<td>90</td>
<td>
<div>
<input id="checkbox51" data-examId = "51" class="pru-enroll-cb" type="checkbox" />
<label for="checkbox51" ></label>
</div>
</td>
</tr>
</tbody>
<tfoot class="pru_title">
<th>Examination</th>
<th>Start</th>
<th>End</th>
<th>Price(E)</th>
<th>Duration(Min.)</th>
<th>Enroll</th>
</tfoot>
</table>
</div>
<div class="wait" style="display:none;width:75px;height:100px;border:1px solid gray;position:absolute;top:50%;left:50%;padding:2px;">
<img src='http://localhost:8888/wordpress/wp-content/uploads/2016/11/pru_wait.gif' class="pru-wait-img" /><br>Processing ... </div>
</div>
</div>
<div>
<input id="pru-enroll-selected-student-id" type="hidden" />
<input id="pru-enroll-nonce" type="hidden" data-nonce="7eaee4ba4d" />
<input id="pru-exam-selection-input" onclick = "enroll_student()" name="submit" type="submit" class="btn btn-info" value="Submit">
</div>
</form>
<div id="pru-customer-exams-container" class="pru-legend-container pru-line-spacer50px">
</div>