Javascript/jquery 无法在其他文件中工作

Question

我有一个ajax电子邮件订阅功能，它在一个独立的单个html文件中工作得很好，只有一个表单和一个电子邮件输入字段，但是当我尝试将它嵌入到其他网站的主页(具有其他表单元素和脚本)时，它除了“请稍候...”消息之外不起作用。

我相信这与引用有关，我对它的概念很差，你能告诉我如何修复它吗 谢谢

<script type="text/javascript">
$(document).ready(function(){

    rclear = $('#s-clear');
    rclear.hide();
    //rclear.hide();
    $('#newsletter-signup').submit(function(){
        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){
            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#signup-response');
            //add status data to form
            form.data('formstatus','submitting');
            //show response message - waiting
            rclear.hide();
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);
            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){
                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';
                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }
                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(200,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                           rclear.show();
                                       });
                                   },3000)
                                });
                    });
                }
            });
        }
        //prevent form from submitting
        return false;
    });
});
</script>

<div style="background: #9FCBFF;width: 185px;height: 105px" >
<form id="newsletter-signup" action="?action=signup" method="post">
<div>
    <fieldset>
    <p id="signup-response"></p>
        <p id="s-clear"> </p>
       <div> <input type="text" name="email" id="signup-email" /></div>
        <div><input type="submit" id="signup-button" value="Subscribe" /></div>

    </fieldset>
    </div>
</form>
</div>

Answer 1

另一种可能是jquery冲突。如果您在主页中使用不同的 javascript 插件(以 $ 作为变量或函数名称)，而这些插件未在独立页面中使用，则可能会出现 jquery 冲突。 尝试:

$.noConflict();
jQuery(document).ready(function($) {
  // Code that uses jQuery's $ can follow here.
});