网页上的多个Facebox：单独的事件？

问题描述

| 我的网页中有两个FaceBox。但是我的问题是两个面板中的“提交”按钮，无论我对第一个面板进行了警报，它也将对第二个面板进行警报。 我之所以拥有两个faceBox，是因为我有一个包含两个表单的菜单，所以每个表单都使用faceBox。 菜单： 配置播客上载音乐 当我触发提交按钮来配置播客表单时。它将触发一条消息“播客描述已被编辑”。然后，当我单击“上传音乐”中的“提交”按钮时，在以“上传音乐”形式显示我的消息之前，还将显示“配置播客”形式的消息。请帮忙， 这是我的两种形式的代码：

<br/>
For upload music:
<br/><br/>

<script>
    $(document).ready(function(){
    $(\'#audioFile\').uploadify({
            \'uploader\'  : \'jquery/js/uploadify/uploadify.swf\',\'script\'    : \'jquery/js/uploadify/uploadify.PHP\',\'cancelImg\' : \'jquery/js/uploadify/cancel.png\',\'folder\'    : \'uploaded/podcastUpload/audio\',\'fileExt\'   : \'*.mp3\',\'method\'    : \'post\',\'fileDesc\'  : \'MP3 Files\',\'onComplete\'  : function(event,ID,fileObj,response,data) {
                $(\".close\").click();
                        for (var i=0; i < document.jform.explicit.length; i++)
                        {
                            if (document.jform.explicit[i].checked){
                                var rad_val = document.jform.explicit[i].value;
                            }
                        }
                        var dataString = \'action=podcastData&jobid=<?=$jobid?>&title=\' + $(\"#title\").val() + \'&authorName=\' + $(\"#authorName\").val() + \'&authorEmail=\' + $(\"#authorEmail\").val() + \'&description=\' + $(\"#description\").val() + \'&categories=\' + $(\"#categories\").val() + \'&keywords=\' + $(\"#keywords\").val() + \'&explicit=\' + rad_val + \'&fileNameAudio=\' + fileObj.name + \'&linkAudio=\' + fileObj.filePath;
                        $.ajax({
                        cache: \'false\',type: \"POST\",url: \"ajaxfunction.PHP\",data: dataString,success: function(msg){
                                    $(\".close\").click();
                                    alert(\'File Has been uploaded successfully!\');
                            }
                        }); 
                    }
            });

    $(\".submit\").click(function(){
        javascript:$(\'#audioFile\').uploadifyUpload($(\'.uploadifyQueueItem\').last().attr(\'id\').replace(\'audioFile\',\'\')); 
    });
});

<br/><br/><br/><br/><br/><br/><br/>

对于配置播客：

<br/><br/>
    <script>
        $(document).ready(function(){

        $(\'#imageFile\').uploadify({
            \'uploader\'  : \'jquery/js/uploadify/uploadify.swf\',\'folder\'    : \'uploaded/podcastUpload/image\',\'fileExt\'   : \'*.jpg;*.gif;*.jpeg\',\'fileDesc\'    : \'Image Files\',data) {
                $(\".close\").click();
            }
        });
            $(\".submit\").click(function(){  
                javascript:$(\'#imageFile\').uploadifyUpload($(\'.uploadifyQueueItem\').last().attr(\'id\').replace(\'imageFile\',\'\'));
                for (var i=0; i < document.pDescrForm.pExplicit.length; i++)
                {
                    if (document.pDescrForm.pExplicit[i].checked){
                        var rad_val = document.pDescrForm.pExplicit[i].value;
                    }
                }

                var dataString = \'action=newpodcastDescr&jobid=<?=$jobid?>&pTitle=\' + $(\"#pTitle\").val() + \'&pAuthorName=\' + $(\"#pAuthorName\").val() + \'&pAuthorEmail=\' + $(\"#pAuthorEmail\").val() + \'&pDescr=\' + $(\"#pDescr\").val() + \'&pSubtitle=\' + $(\"#pSubtitle\").val() + \'&pcopyright=\' + $(\"#pcopyright\").val() + \'&pExplicit=\' + rad_val;
                $.ajax({
                cache: \'false\',success: function(msg){
                    $(\".close\").click();
                    alert(\'New podcast description has been added\');
                    }
                }); 
            });
        });
</script>

    

解决方法

在音乐形式的代码中查看以下代码：

$(\".submit\").click(function(){ ...

然后在播客表单代码中找到相同的内容。您的提交按钮与单击事件绑定了两次。 jQuery选择器找到所有匹配的元素，并将事件绑定到所有元素。如果您第二次绑定事件，则jQuery会生成一堆事件回调，然后一个接一个地运行它们。 更改Submit按钮的类（因为您需要唯一的选择器），或者如果您不想破坏CSS，则添加另一个类（即音乐和播客）并按如下方式使用它： $（\“。submit.music \”）。click（function（）{... $（\“。submit.podcast \”）。click（function（）{... 这应该只触发一个回调。