Question

我通过基于模板创建动态<ul>代码列表来创建动态<li>。

<li>模板看起来像这样：

<script type="text/html" id="itemTemplate">
    <li id="{{id}}">
        <div class="name" title="{{name}}">{{name}}</div>
        <div class="saveAs"></div>
        <div class="copy"></div>
    </li>
</script>

我的目标是让saveAs和copy div可点击并执行一个以id作为参数的函数。

我通过这个功能设法做到了这一点：

function myView() { 
    self.itemTemplate = null;
    self.myArrayOfObjects = null;

    self.initItemsUl = () => {
        self.itemsUl = self.mainContainer.find('.itemsUl');

        self.myArrayOfObjects.forEach(self.initItemLi);
    };
    self.initItemLi = (item) => {        
        var viewObj = {
            id: item.Id,            
            name: item.Name
        };

        var itemLi = $(Mustache.render(self.itemTemplate, viewObj));
        self.mainContainer.append(itemLi[0]);
        self.setupItemOnClick(itemLi, item.Id);
    };
    self.setupItemOnClick = (itemLi, id) => {
        itemLi.find('.saveAs').on('click', null, () => {
            //do_something(id)
        });

        itemLi.find('.copy').on('click', null, () => {
            //do_something(id)
        });
    };

    return {
        init: (myArrayOfObjects) => {                               
            self.myArrayOfObjects = myArrayOfObjects;               
            self.itemTemplate = $('#itemTemplate').html();      
            Mustache.parse(self.itemTemplate);

            self.initItemsUl();
        }
    };
}

每次我渲染setupItemOnClick模板时，请注意调用函数li，我的问题是如何只调用此函数一次

Answer 1

在ul上使用事件委派，而不是在单个.saveAs和.copy元素上使用处理程序：

$("selector-for-your-ul")
    .on("click", ".saveAs", e => {
        // Handle click here, `e.currentTarget` is the `.saveAs` that was clicked
    })
    .on("click", ".copy", e => {
        // Handle click here, `e.currentTarget` is the `.copy` that was clicked
    });

重新评论：

...如何从e对象中获取父li的id？

使用$(e.currentTarget).closest("li").attr("id")。

设置为单击“<li>”而不进行迭代

1 个答案: