Question

我正在建立一个消息中心。在他们的收件箱中，我的用户可以选择多个复选框，单击“删除”按钮，删除选定的邮件。效果很好：

HTML：

<input type="submit" id="DeleteButton" value="Delete" />

脚本：

 $('#DeleteButton').click (function() {
 var selected = new Array();
 $("input:checkbox[name=message]:checked").each(function() {
 selected.push($(this).val());
 });
 var selectedString = selected.join(",");
        <cfoutput>$.post("SecComm.cfc?method=deleteMessages&recipientID=#session.ID#", {selected: selected },</cfoutput>
        function(html) {
                        loadMessages();
        });  
    });

我遇到的问题是我允许用户将邮件移动到他们可能设置的任何文件夹。我正在使用类似的脚本，但无法使用href：

<div class="moveMessages"> 
        <a href="" class="move"  id="7">My new folder</a>
</div>

脚本：

$('.move').click(function(){ 
 var folderID = $(this).attr('id');                                
 var selected = new Array();
 $("input:checkbox[name=message]:checked").each(function() {
  selected.push($(this).val());
 });
        $.post(
            "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
            {messageID: selected },
            {folderID: folderID },
            function() {
                loadMessages();
            });         
    });

我确定我错过了一些明显的东西。非常感谢帮忙。

Answer 1

href具有可能与您正在执行的操作冲突的默认功能。确保您正在传递事件对象，然后使用preventDefault阻止浏览器执行href的默认功能。

$('.move').click(function(event){
    event.preventDefault();

Answer 2

看似错误的事情：

防止事件的默认行为。
将数据作为一个对象传递，而不是作为两个单独的参数传递。

$('.move').click(function( event ){ 
    var folderID = $(this).attr('id');                                
    var selected = new Array();
    $("input:checkbox[name=message]:checked").each(function() {
        selected.push($(this).val());
     });
     $.post(
            "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
                { messageID: selected, folderID: folderID }, 
                function() {
                    loadMessages();
               });         
      event.preventDefault();
    });

Answer 3

Id不能只是一个数字。

例如使用id="message-7"

另见：What are valid values for the id attribute in HTML?

或者在你的情况下最好这样做：

<a href="" class="move"  data-id="7">My new folder</a>

并使用以下方式访问它：

$('.move').click(function(e){ 
  var folderID = $(this).data('id');

此外：

添加e.preventdefault();

防止超链接导航离开页面。

Answer 4

$.post方法的第二个参数是数据或成功处理程序。您传递了2个不同的数据参数，一个用于messageID，另一个用于folderID。您应该传递一个包含其中所有数据元素的对象。试试这个

     $.post(
        "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
        {messageID: selected, folderID: folderID },
        function() {
            loadMessages();
     });

由于您未在锚点的href属性中设置任何内容，因此它不会在FF中显示为链接。至少设置javascript:void(0)或#。如果设置#，则在单击锚点后，浏览器将滚动到顶部。为了避免这种情况，你应该通过在e.preventDefault()事件处理程序中调用click来阻止锚的默认行为，其中e是处理程序中的事件对象。

$('.move').click(function(e){ 
   e.preventDefault();
   ...
   ...
});

Answer 5

我不确定你的问题是什么......它描述得不是很好，但是根据经验和你提到的href链接，我会说你的链接正在传播......正在“刷新”页面。

所以我的答案（除非我得到更多信息）是添加

return false;

在click(function(){ });的末尾，例如：

$('.move').click(function(){ 
 var folderID = $(this).attr('id');                                
 var selected = new Array();
 $("input:checkbox[name=message]:checked").each(function() {
  selected.push($(this).val());
 });
        $.post(
            "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
            {messageID: selected },
            {folderID: folderID },
            function() {
                loadMessages();
            });         
    return false;
});

这将阻止链接传播。

href点击事件与btn点击事件。困惑？

5 个答案: