Question

我有以下代码：

<script>
$('document').ready(function() {
  $('#button').click(function() {
      var street = document.getElementById("street").value;

      $.ajax({
          dataType: "json",
          url: "{{ url }}&{{ qstring }}",
          data: { street: street },
          crossDomain: true,
          success: function(response) {
              function myFunction() 
              {
                alert("MyFunction");
              }

              $('#data_box').html('<h3>Pick a matching street</h3>');

              $.each(response, function (key, value) {
                  var string = String(value);                 
                  $('#data_box').append("<a href='#' onlick='myFunction();'>" + value.full_street_name + "</a>    Address Range: " + value.min_address + "-" + value.max_address + "</br>");

              });
          }
     });
  });
});

</script>

...以及将显示数据的div部分：

<div id='data_box'>
</div>

表单中的一个按钮触发（'#button'）。click函数，它向url发送请求，返回json数据，并在“data_box div”中将其显示为超链接。之后，我想要的是什么要发生的是当点击超链接时，我希望它触发一个函数。我在该链接中有一个onclick，调用“myFunction（）”但它什么也没做。我尝试过使用各种jQuery函数但似乎没有任何工作我也尝试将myFunction函数放在不同的位置，包括jQuery之外，但它也没有用。

Answer 1

这是您了解范围界定的地方。您已在成功处理程序中定义了myFunction，因此只能从成功处理程序内部调用它。但是，您的<a href="...">位于window范围内（因为在成功处理程序中，它只是一个无意义的文本字符串，append调用将其转换为只能访问window范围），它不知道您的myFunction函数，所以现在您正在尝试调用不存在的函数。

在JavaScript中，所有内容都是作用于它们所在函数的作用域（即“对于内容可见”）。函数X中用var ...声明的变量不存在于函数X之外，并且函数已定义函数X内部不存在函数X.

在这种情况下，您希望这样做（注意value已经是一个字符串，使用var string = String(value)没有意义）：

var newElement = $("<a href='#'>" + ... + "</a>...: " + ... + "</br>");
newElement.click(myFunction);
$('#data_box').append(newElement);

除非您不这样做，因为您使用的是<a href="#">，并且我100％确定没有尝试设置指向页面顶部的链接：不要使用{ {1}}当你不理解时。

你真正想要的是：

<a>

是的，那也没有var newElement = $("<div><span>" + ... + "</span>...: " + ... + "</div>"); newElement.find("span").click(myFunction); $('#data_box').append(newElement);了。不要使用中断代码，请使用CSS。

Answer 2

function myFunction() 
{
    alert("MyFunction");
}

在函数内定义，因此内联事件处理程序无法使用它。内联事件处理程序始终使用全局范围，因为它们在DOM上下文中执行，尝试全局定义函数

window.myFunction = function(){
       alert("myFunction");
}

Answer 3

你有范围问题不使用内联事件，用jQuery附加它们。功能范围将起作用。

var outStr = "";
$.each(response, function (key, value) {
  outStr += "<a href='#' >" + value.full_street_name + "</a>    Address Range: " + value.min_address + "-" + value.max_address + "</br>";
});

$('#data_box').append(outStr).on("click", "a", myFunction);

无法从jQuery Ajax成功函数中获取onclick函数

3 个答案: