Question

我正在创建一组将克隆预先存在的HTML的JavaScript方法。这是HTML：

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- <script src="lib/pm-helpers.js"></script> -->
    <script src="lib/pm-ajax-inputs.js"></script>
</head>
<style>
    .hidden { display: none; }

</style>
<body>
    <script>
    jQuery( document ).ready( function() { 

        /*
        * Clone example 
        * the instance() method takes 3 parameters
        * @param: wrapper id or class
        * @param: clone group
        * @param: action button, image or link; something with a click event ability.
        */

        var instance = PM_CONTROLS.MODEL.PROPS.instance( '.first', '.control-group', '#clone' );
        instance.bind();

    } );
    </script>

    <ul class='first'>
        <li class='control-group'>
            <input type="text" name="discover[]"  value="" placeholder="info here" />
            <input type="button" id="bn-edit" class="green pm-edit" value="edit">
            <input type="button" id="bn-delete" class="blue pm-delete" value='delete'>
        </li>
    </ul>
    <ul class='second'>
        <li id='control-group2' class='controls '>
            <input type="text" name="discover[]"  value="" placeholder="info here" />
            <input type="button" id="bn-edit1" class="green pm-edit" value="farfenugal">
            <input type="button" id="bn-delete1" class="blue pm-delete" value='farfenay'>
        </li>
    </ul>
    <ul id="control-wrapper">
        <li class='controls'>
            <input type="text" name="discover[]"  value="" placeholder="control purpose here" />
            <input type="button" id="clone" class="green pm-add" value="add">
        </li>
    </ul>
    <ul id="control-wrapper2">
        <li class='controls'>
            <input type="text" name="discover[]"  value="" placeholder="control purpose here" />
            <input type="button" id="clone1" class="green pm-add" value="add">
        </li>
    </ul>
</body>

这是JS： var PM_CONTROLS = PM_CONTROLS || {};

PM_CONTROLS.createNS = function ( namespace ) {

    var nsparts = namespace.split(".");

    var parent = PM_CONTROLS;

    // include or exclude the root namespace so we strip it if it's in the namespace
    if (nsparts[0] === "PM_CONTROLS") {

        nsparts = nsparts.slice(1);

    }

    // if required create a nested namespace by looping through the parts
    for (var i = 0; i < nsparts.length; i++) {

        var partname = nsparts[i];

        // check if the current parent already has the namespace declared
        // if it doesn't then create it
        if (typeof parent[ partname ] === "undefined") {

            parent[partname] = {};

        }

        // get a reference to the deepest element in the hierarchy
        parent = parent[ partname ];
    }

    // the parent is now constructed with empty namespaces and can be used.
    // we return the outermost namespace
    return parent;
};

PM_CONTROLS.createNS( 'PM_CONTROLS.MODEL.PROPS');

PM_CONTROLS.createNS( 'PM_CONTROLS.ACTIONS');

PM_CONTROLS.props = null;
PM_CONTROLS.i= 0;
PM_CONTROLS.MODEL.PROPS.instance = function ( wrapper_class_or_id, element_to_clone_id, clone_button_id  ) {


    var props = {
            wrapper : wrapper_class_or_id + PM_CONTROLS.i++
            , clone : element_to_clone_id + PM_CONTROLS.i
            , button : clone_button_id
    };

    var bind = function() {

        PM_CONTROLS.props = getProps();

        return new PM_CONTROLS.ACTIONS.bindAction();
    };

    var getProps = function() {
        return props;
    };

    return {

        bind : bind
        , getProps: getProps
    };
};


PM_CONTROLS.ACTIONS.clone = function() {

    var clone = $( PM_CONTROLS.props.clone ).clone();

    $( PM_CONTROLS.props.wrapper ).append( clone );

    clone.fadeIn('fast');



};

PM_CONTROLS.ACTIONS.bindAction = function () {


    $( PM_CONTROLS.props.button ).on( 'click', '', PM_CONTROLS.ACTIONS.clone() );
    //$( '#clone' ).click( PM_CONTROLS.ACTIONS.clone() );

};

因此，在运行HTML时，使用class =＆＃39; control-group＆＃39;正在加载到PM_CONTROLS闭包和属性中。

此外，代码遍历所有内容而没有任何错误，并且最终传递给bindAction（）方法的值是正确的（我已经在bindAction代码中对选择器进行了硬编码以进行调试）。

你能解释为什么带有id =＆＃39; #cron＆＃39;的HTML按钮的原因。是否绑定了创建的实例变量的click事件？

我们非常感谢您的帮助。

此致史蒂夫

私有/公共关闭时按钮选择器绑定问题

0 个答案: