-1

我有以下代码：

<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 数据，并将其呈现为“da​​ta_box div”中的超链接。之后，我想要发生的是单击超链接时，我希望它触发一个函数。我在那个链接中有一个调用“myFunction()”的 onclick，但它什么也没做。我也尝试过使用各种 jQuery 函数，但似乎没有任何效果。我也尝试将 myFunction 函数放置在不同的位置，包括在 jQuery 之外，但它也没有工作。

4

3 回答 3

1

这是您了解范围界定的地方。您已myFunction在成功处理程序内部定义，因此只能从成功处理程序内部调用它。但是，你的<a href="...">生活在window范围内（因为在成功处理程序中它只是一个无意义的文本字符串，并且append调用将它变成一个只能访问window范围的真正 HTML 元素），它不知道你的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% 肯定不会尝试设置指向页面顶部的链接：当你不是故意的时不要使用<a>。

你真正想要的是：

var newElement = $("<div><span>" + ... + "</span>...: " + ...  + "</div>");
newElement.find("span").click(myFunction);
$('#data_box').append(newElement);

是的，那也没有<br>了。不要使用中断代码，使用 CSS。

于 2013-06-20T17:04:54.683 回答
0 
function myFunction() 
{
    alert("MyFunction");
}

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

window.myFunction = function(){
       alert("myFunction");
}
于 2013-06-20T17:04:49.777 回答
0

你有范围问题不要使用内联事件，用 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);
于 2013-06-20T17:14:17.173 回答