Question

我从开发人员处获得了一些离开我们公司的代码。他写了一个内联函数，看起来像这样：

<button class="xxx" id="MyID" type="button" onclick="javascript: $('#openThis').slideToggle('slow');">btnText</button>

我试图将其删除并将其放入另一个函数中以编写回调，以便在可见时滚动到切换区域。

$("#MyID").click(function () {
    $("#openThis").slideToggle("slow");
});

但我似乎无法让它发挥作用。我做错了什么？

Answer 1

您是在DOM上创建对象之前还是之后添加侦听器？

因为如果你试图绑定那个onclick函数而不等待文档准备好就没有对象来创建监听器。

这样的事情可以起作用：

$(document).on('ready', function() {
  $("#MyID").click(function () {
    $("#openThis").slideToggle("slow");
  });
});

Answer 2

如果您动态添加按钮，请使用on代替

将一个或多个事件的事件处理函数附加到   选定的元素。

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）
时必须存在

//Instead of document you can use a container id
$(document).on('click',"#MyID",function () {
    $("#openThis").slideToggle("slow");
});

此方法的作用是将事件添加到当前选定的元素document，并将event委托给您的选择器，在这种情况下为#MyID。

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

Answer 3

$(document).on('click', '#myBtn', function(){
    $('#foo').slideToggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="foo">content</div>
<button id="myBtn">Click me</button>

Answer 4

您想要滚动到该区域，请从按钮中删除JavaScript

你需要做这样的事情

$("#MyID").click(function() {
    $('html, body').animate({
        scrollTop: $("#openThis").offset().top
    }, 2000);
    $("#openThis").slideToggle("slow");
});

Answer 5

你应该删除onclick =＆＃34;＆＃34;按钮标记和javascript中的属性：

$("#MyID").click(function (e) {
  e.preventDefault();
    $("#openThis").slideToggle("slow");
});

使用防止默认值。希望有所帮助

试图从内联javascript编写函数

5 个答案: