Question

我有这个ajax电子邮件订阅功能，它在一个独立的单个html文件中运行很好，只有一个表单和一个电子邮件输入字段但是当我尝试将其嵌入其他网站的homapage（具有其他表单元素和脚本）时不会超出“请等待......”的消息。

我认为它与引用有关，我的概念非常糟糕，请您告诉我如何解决它三江源

<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.
});

Answer 2

您是否检查过控制台是否有错误消息？另外，请检查地址框的右上角以确保页面没有阻止脚本。

Javascript / jquery在其他文件中不起作用

2 个答案: