第一次选择“添加新项”并添加新选项时,以下各项工作正常。第二次(针对按类别区分的其他元素)它将新选项添加到所选元素和第一个元素中。这两个元素都必须绑定到addnew。
<script type="text/javascript"> $('#upload_form option[value="addnew"]').click(function(){ // Show modal window $('#add-new').modal('show'); // Get the class var Classofentry = $(this).attr("class"); $('#add-new-submit').on('click', function(){ // Get new option from text field var value = $('#add-new-text').val(); console.log(value); $.ajax({ type: "POST", url: "<?php echo site_url(); ?>main/change_options", data: {new_option: value, new_option_class: Classofentry}, dataType: "html", error: errorHandler, success: success }); function success(data) { $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); //alert(data); //alert('Success!'); } function errorHandler() { alert('Error with AJAX!'); } $('#add-new').modal('toggle'); }); }); </script>
奇怪的是,它似乎两次遍历了ajax帖子。我想它正在查找所有“ addnew”值(到目前为止有2个,还会有更多)。我怎样才能只用指定的类来对待元素?希望这是有道理的。
感谢您的回复!我找到了一种方法,可以通过保留嵌套的点击但不绑定第二个点击来使其正常工作。我无法获得建议的解决方案(使所有功能都嵌套)正常工作。当它们没有嵌套时,似乎没有办法使第二次点击起作用。我不知道为什么。在调用ajax的函数中还必须具有success和errorHandler函数。这是代码(与上面的问题相同,但在第二个嵌套单击中包含unbind语句):
<script type="text/javascript"> var Classofentry = ''; $('#upload_form option[value="addnew"]').click(function(){ // Show modal window $('#add-new').modal('show'); // Get the class var Classofentry = $(this).attr("class"); console.log(Classofentry);Thanks $('#add-new-submit').on('click', function(){ // Get new option from text field var value = $('#add-new-text').val(); console.log(value); $.ajax({ type: "POST", url: "<?php echo site_url(); ?>main/change_options", data: {new_option: value, new_option_class: Classofentry}, dataType: "html", error: errorHandler, success: success }); $('#add-new-submit').unbind('click') // <-------------- The answer!!!!! $('#add-new').modal('toggle'); function success(data) { //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); //alert(data); //alert('Success!'); } function errorHandler() { alert('Error with AJAX!'); } }); }); </script>