网页上的多个Facebox:单独的事件?

时间:2011-04-14 02:17:53

标签: javascript jquery ajax submit facebox

我在网页上有两个facebox。但我的问题是两个facebox中的提交按钮,无论我对我的第一个facebox做出什么警报,它也会警告我的第二个facebox。

这就是为什么我有两个facebox的原因,因为我有两个表单的菜单,然后每个表单都使用facebox。

菜单:
配置播客上传音乐

当我触发提交按钮以配置播客表单时。它将触发消息“Podcast描述已被编辑”。然后当我点击上传音乐中的提交按钮时,在上传音乐表单中显示我的消息之前,还将显示配置播客表单中的消息。请帮助,

这是我的两种形式的代码:

<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/>

对于配置POdcast:

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

        $('#imageFile').uploadify({
            'uploader'  : 'jquery/js/uploadify/uploadify.swf',  
            'script'    : 'jquery/js/uploadify/uploadify.php',
            'cancelImg' : 'jquery/js/uploadify/cancel.png', 
            'folder'    : 'uploaded/podcastUpload/image',
            'fileExt'   : '*.jpg;*.gif;*.jpeg',
            'fileDesc'    : 'Image Files',
            'method'    : 'post',
            'onComplete'  : function(event, ID, fileObj, response, 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',
                type: "POST",  
                url: "ajaxfunction.php",  
                data: dataString,
                success: function(msg){
                    $(".close").click();
                    alert('New Podcast description has been added');
                    }
                }); 
            });
        });
</script>

1 个答案:

答案 0 :(得分:0)

在音乐表格代码中查看此代码:

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

然后在播客表单代码中找到相同内容。您的提交按钮与点击事件绑定两次。 jQuery选择器找到所有匹配元素,并将事件绑定到所有匹配元素。如果你第二次绑定事件,jQuery会做一堆事件回调,然后一个接一个地运行它们。

更改提交按钮的类别(因为您需要唯一的选择器)或者如果您不想销毁css添加另一个(即音乐和播客)并按如下方式使用它:

$(“。submit.music”)。click(function(){... $(“。submit.podcast”)。click(function(){...

这应该只触发一次回调。