防止onclick jquery函数允许onclick ajax提交

Prevent onclick jquery function to allow an onclick ajax submission

本文关键字：onclick ajax 提交 函数 jquery 防止      更新时间：2023-09-26
<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提交表单?

$('.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，然后绑定一个事件.on('click'，然后将该事件绑定到- button[id-update]。然后将事件本身传递给函数- function(e)

这将目标按钮点击，你的e.preventDefault();将实际工作。e.preventDefault中的e为事件。你没有通过函数传递它，所以提交按钮做了一个提交按钮做的事情。

下面是一个来自jsFiddle的例子:demo

$(document).ready( function () {
  $('.alert').on('click', '#update', function () {
          alert('submit ok');
  });
});

希望对你有帮助

您可以这样使用on / off:

创建一个函数点击alert 

function alertClick(){
    $(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();
            }
        });
    });
}

在你的button id update中绑定你的click事件

$('button[id=update]').on('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) {
            $(".alert").on('click', alertClick); // Bind click event
        }
    });
});

如果你需要在之后的另一个动作上解除事件的绑定，你可以使用:

$(".alert").off('click');

然后用这个重新绑定:

$(".alert").on('click', alertClick);

试试这个:

$("#divId #buttonId").on({
    click: function() {
    // your code here
  }
})
相关文章：