Question

JS Calendar完全启动后，出现下面的HTML，我想用AsynchronousViewDefault_CalendarView属性运行我的JS。但是，它根本不起作用。

否则，我的问题是否有任何解决方案需要确保我可以使用AsynchronousViewDefault_CalendarView属性来运行我的JS？

HTML：

<div id="AsynchronousViewDefault_CalendarView">
    <div class="ms-acal-header">
    <div>
        <table class="ms-acal-month">
        </table>
        <div class="ms-acal-vlink">
            <table>
        <tbody>
            <tr>
                <td><a href="javascript:void(0)" title="Add" evtid="new_item">
                    <img border="0" src="/_layouts/images/caladd.gif">Add</a></td>
            </tr>
        </tbody>
    </table>
    </div>
</div></div></div>

使用Javascript：

$( "#AsynchronousViewDefault_CalendarView div div table" ).on( "click", function() {
    var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"] [evtid="new_item"]').hover(
        function () {
            $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
        }
    );
});

或

$( "#AsynchronousViewDefault_CalendarView" ).on( "click", '.ms-acal-vlink' , function() {
    var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"] [evtid="new_item"]').hover(
        function () {
            $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
        }
    );
});

Answer 1

当你运行那个选择器时，

#AsynchronousViewDefault_CalendarView div div table不存在，因此on也没有绑定事件处理程序的元素，而是应该将它委托给一个祖先，例如{ {1}}，或者插入html的元素：

document

jQuery docs中有一个很好的解释：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

如何使用Javascript在on（）函数上运行JS

1 个答案: