Question

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

这是我的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>

loadForm是我一直在制作的自定义插件，这里是代码。

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

这很好但我希望将ajax导入到我调用函数的任何元素上。

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

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

为什么这不会导入任何我调用函数的元素？没有任何反应如果我将错误函数添加到ajax调用中，我没有任何错误并没有告诉我它的错误。我没看到我做错了这个调用它应该将内容添加到调用该函数的元素。

Answer 1

您的插件过于复杂。 jQuery有一个方法已经完成了你要做的事情，所以只有让你的插件使用它才有意义（甚至在没有插件的情况下直接使用方法。）

(function($){
    $.fn.loadForm = function(action, formName){
        this.load("include/forms/"+action+"-"+formName+".php");
    };
}(jQuery));

通过完全取消回调来回避你遇到的问题。或者，你可能没有插件，我觉得它更干净，并且在出现任何问题时更容易维护/调试。

$(document).on('click', '#add', function(){
    $("div#form-import-container").load("include/forms/add-websites.php");
});

就你的插件而言，要记住的重要一点是主插件上下文中的this将是jQuery集合，这就是我能够直接使用this.load(...的原因，但是你的ajax成功回调，它实际上是ajax方法定义为或window / undefined的任何东西。在您的情况下，ajax方法将this定义为传入的选项，但是，ajax方法有一个名为context的选项，它将替换上下文与您传入的内容。因此，您的版本插件可以像这样修复：

(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));

Answer 2

只需存储此元素即可。就是这样！

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

自定义jquery功能无法正常工作

2 个答案: