javascript - 阻止 onclick jquery 函数以允许 onclick ajax 提交

Question

<div class="alert alert-success" id="1">   
    <form style="height:42px;" lpformnum="1">             
        <h4 class="pull-left" style="text-transform: capitalize; width:11%;">
            Title:
        </h4>
        <textarea class="pull-left" style="margin-right:1%;">
            This is a msg 
        </textarea>
         <h4 class="pull-left" style="text-transform: capitalize; width:6%;">
             Title 2:
         </h4>
         <input class="pull-left" style="width:8%;  margin-right:1%; " type="text" 
                id="myid" value=""
         />
         <button class="pull-left btn btn-primary" id="update" value="1" type="submit" 
                 style="width:7%; margin-right:1%;" name="credits">Submit</button> 
         <button class="pull-left btn btn-danger" type="submit" id="delete" style="width:6%" 
                 value="" name="credits">Delete</button>                
    </form>
</div>


<script>
    $(".alert").click(function(){
        $(this).fadeOut(300, function(){             
            var checkValues = $(this).attr('id');
            var checkPost = $(this).children("textarea").text();
            var checkType = $(this).children("span").attr('class');
            var checkName = $(this).children("span").attr('class');
            $.ajax({
                url: '/se/test.php',
                type: 'post',
                data: {id:checkValues, posti:checkPost, types:checkType, name:checkName},
                success:function(data){
                    $(this).remove();   // location.reload();
                }
            });             
        });
    });
</script>

上面的代码效果很好，但我需要允许 div.alert 内的按钮在单击时通过 ajax 提交表单。

<script>
    $('button[id=update]').click(function(){
        e.preventDefault();
        var checkValues = $(this).children("#update").val();
        var checkCred = $(this).children("#ucredits").val();
        var checkPost = $(this).children("textarea").text();
        var checkType = $(this).children("i").text();
        $.ajax({
            type: "POST",
            url: "update_social_cred.php",
            data: { id: checkValues, credits: checkCred, text: checkPost, type: checkType  },
            success:function(result) {
            }
        });
    });
</script>

但是我尝试了很多不同的方法，要么按钮不提交表单，要么尝试通过标准提交而不是通过 ajax 提交表单。

如何阻止 .alert click 功能，从而允许按钮通过 ajax 提交表单？

Answer 1

$('.alert.alert-success').on('click', 'button[id=update]', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var checkValues = $(this).children("#update").val();
        var checkCred = $(this).children("#ucredits").val();
        var checkPost = $(this).children("textarea").text();
        var checkType = $(this).children("i").text();
        $.ajax({
            type: "POST",
            url: "update_social_cred.php",
            data: { id: checkValues, credits: checkCred, text: checkPost, type: checkType  },
            success:function(result) {
            }
        });
    });

区别在于点击处理程序...

$('.alert.alert-success').on('click', 'button[id=update]', function(e) {

定位动态元素.alert.alert-success，然后绑定(bind)一个事件.on('click'，然后是事件绑定(bind)到的项目 - button[id-update]。然后将事件本身传递给函数 - function(e)

这将针对按钮单击，并且您的 e.preventDefault(); 将真正起作用。 e.preventDefault 中的 e 是事件。您没有通过函数传递它，因此提交按钮正在执行提交按钮的操作。