Question

我有一个jQuery的blockUI插件，通过它我可以在一个重叠的框中调用另一个php文件。我想通过多个具有相同id的按钮激活该功能（这里是pageDemo1）。但是当我这样做的时候，只有一个按钮可以正常工作而其他按钮都没有。任何人都可以解释为什么会如此？我应该怎样做才能使它发挥作用？

$(document).ready(function() { 

    $('#pageDemo1').click(function() { 
        $.blockUI({ message: $('#domMessage') }); 
        test(); 
    }); 

    $('#submit').click(function() {
    var action = $("#form1").attr('action');
    var form_data = {
        message: $("#message").val(),
        is_ajax: 1
    };

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(response)
        {
            if(response == 'success')
                $("#form1").slideUp('slow', function() {
                    $("#message").html("<p class='success'>message</p>");
                });
            else
                $("#message").html("<p class='error'>message</p>"); 
        }
    });

    return false;
}); 
});

Answer 1

首先看看不要使用具有相同ID的html元素。您可以将事件附加到具有相同类，名称等的元素上。

Answer 2

您是说有两个具有相同ID的元素（按钮）？如果是这样，这不是有效的HTML（参见W3C标准）。您可以尝试使用类来代替。还记得你可以使用多个类来保持按钮在某种程度上是唯一的。 E.g。

<input type="button" class="pageDemo pageDemo1" value="My Click does this"/>
<input type="button" class="pageDemo pageDemo2" value="My Click also does this/>

然后在JS中访问这些：

$('.pageDemo').click(function() {
    // Put code here which should happen when either of your elements with class 'pageDemo' get clicked
});

   $('.pageDemo.pageDemo1').click(function() {
      // Put code here which should only happen when elements with 'pageDemo1' class get clicked
});

使用jquery覆盖框

2 个答案: