Javascript 自定义jquery函数不工作，不允许此_Javascript_Php_Jquery_Html_Ajax

Javascript 自定义jquery函数不工作，不允许此

javascript php jquery html ajax

Javascript 自定义jquery函数不工作，不允许此,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一个自定义的jquery插件，可以将表单导入页面上的元素。插件保存在一个名为jquery-library.js的文件中，该文件与另一个jquery库jquery.min.js一起导入我的页面。我可以让我的插件工作，如果我硬编码的变量它的ajax的，但不是如果我使用这个或$（这个）以下是我的php页面代码： <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.co

我有一个自定义的jquery插件，可以将表单导入页面上的元素。插件保存在一个名为jquery-library.js的文件中，该文件与另一个jquery库jquery.min.js一起导入我的页面。我可以让我的插件工作，如果我硬编码的变量它的ajax的，但不是如果我使用这个或$（这个）

以下是我的php页面代码：

<head>
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="scripts/jquery-library.js"></script>

    <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
    <link type="text/css" href="css/main.css" rel="stylesheet"/>

    <script>
        $(document).on('click', '#add', function(){
            $("div#form-import-container").loadForm("add", "websites");
        });
    </script>   

    <title>Senneca Portal | Adminstration Panel</title>
</head>
<body>
    <?php require_once("include/header.php"); ?>
    <section id="content">
        <section id="left-side-bar">
            <img id="side-profile-pic" src=""/>
            <div id="page-sub-nav-container">
                <p class="sub-nav-title"><?php echo $pageDisplay; ?></p>
                <nav id="side-nav">
                    <ul>
                        <li><a <?php if($page == "overview"){ echo "class='active'";}; ?> href="administration.php">Overview</a></li>
                        <li><a <?php if($page == "websites"){ echo "class='active'";}; ?> href="administration.php?page=websites">Websites</a></li>
                        <li><a <?php if($page == "products"){ echo "class='active'";}; ?> href="administration.php?page=products">Products</a></li>
                        <li><a <?php if($page == "libraries"){ echo "class='active'";}; ?> href="administration.php?page=libraries">Libraries</a></li>
                        <li><a <?php if($page == "colors"){ echo "class='active'";}; ?> href="administration.php?page=colors">Colors</a></li>
                        <li><a <?php if($page == "testimonials"){ echo "class='active'";}; ?> href="administration.php?page=testimonials">Testimonials</a></li>
                        <li><a <?php if($page == "users"){ echo "class='active'";}; ?> href="administration.php?page=users">Users</a></li>
                    </ul>
                </nav>
            </div>
        </section>
        <section id="data">
            <button id="add">Add New</button>
            <h2><?php echo $pageDisplay." - ".$page; ?></h2>
            <!-- Area for form import -->
            <div id="form-import-container"></div>

这很好，但是我希望ajax导入到我调用函数的任何元素中

所以这不起作用，我也需要它

(function($){
    $.fn.loadForm = function(action, formName){
        $.ajax({url: "include/forms/"+action+"-"+formName+".php", success: function(result){
            $(this).html(result);
        }});
    };
}(jQuery));

为什么这不会将任何内容导入到调用该函数的元素中？如果我将error函数添加到ajax调用中，则不会发生任何错误，也不会有任何消息告诉我错误已经消失。我看不出我做错了什么。此调用应该将内容添加到调用函数的元素。

只需存储您的此元素即可。就这样

(function($){ $.fn.loadForm = function(action, formName){ var el=this; $.ajax({url: "include/forms/"+action+"-"+formName+".php", success: function(result){ el.html(result); }}); }; }(jQuery));

你的插件太复杂了。jQuery有一个方法已经完成了您要做的事情，因此只有让您的插件使用它（或者甚至不使用插件直接使用该方法）才有意义
这样就完全消除了回调，从而避免了您遇到的问题。或者，你不可能有插件，我认为它更干净，更容易维护/调试，如果出现任何问题

$(document).on('click', '#add', function(){ $("div#form-import-container").load("include/forms/add-websites.php"); });
就您的插件而言，需要记住的重要一点是，主插件上下文中的
this
将是jQuery集合，这就是为什么我能够使用
this.load（…
直接，但是在ajax成功回调中，它实际上是ajax方法定义为或窗口/未定义的任何内容。在您的情况下，ajax方法将
此
定义为传入的选项，但是，ajax方法有一个名为
上下文
的选项，该选项将替换为您需要的任何内容传入。因此，您的插件版本可以按如下方式修复：

(function($){ $.fn.loadForm = function(action, formName){ $.ajax({ url: "include/forms/"+action+"-"+formName+".php", context: this, // pass `this` as the context of the success callback success: function(result){ this.html(result); // this is already a jQuery collection, no need to wrap it } }); }; }(jQuery));

在上面的代码中，
此
可能重复，它在
成功
回调中，不再引用调用
加载表单
的元素。重复显示了解决此问题的方法。还请注意，jQuery插件。啊，这更有意义。我没有意识到ajax调用会导致这是一个新的参考。谢谢你的参考。在我发布问题之前，我一定输入了错误的东西，以找到类似的答案。你的…插件与使用，比如说，$.fn.load，除了缩短你传入的url之外，还有什么不同？你似乎在重新发明轮子，或者你的插件是否可以简化为仅用于转到$.fn.load.Good point！我猜OP可能希望在超过此点后进行进一步处理，但如果它与发布的完全一样，则使用
.load
是一种更好的方法。很高兴知道我将来会使用此方法，但我必须定制我现在在学校项目中使用的插件：/并非总是更快，但希望我们更多地了解jquery插件编程风格。@AlexBeyer可以理解。我在回答中添加了一个部分，说明如何让您的插件版本在正确的上下文中工作。下面Vixed的回答基本上以相同的方式解决了问题。非常好，非常感谢您的解释回答你的问题。
$(document).on('click', '#add', function(){ $("div#form-import-container").load("include/forms/add-websites.php"); });

(function($){ $.fn.loadForm = function(action, formName){ $.ajax({ url: "include/forms/"+action+"-"+formName+".php", context: this, // pass `this` as the context of the success callback success: function(result){ this.html(result); // this is already a jQuery collection, no need to wrap it } }); }; }(jQuery));