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点击功能，从而允许按钮通过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，然后绑定事件.on('click'，然后绑定事件绑定的项目 - button[id-update]。然后将事件本身传递给函数 - function(e)

这将定位按钮点击，您的e.preventDefault();将实际运作。 e中的e.preventDefault是事件。您没有通过该函数传递它，因此提交按钮正在执行提交按钮所做的事情。

Answer 2

以下是来自jsFiddle的示例：demo

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

希望能帮助你：）

Answer 3

您可以像这样使用on / off：

创建功能点击提醒

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();
            }
        });
    });
}

将您的点击事件绑定在按钮ID更新Ajax

中

$('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);

Answer 4

试试这个：

$("#divId #buttonId").on({
    click: function() {
    // your code here
  }
})

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

4 个答案: