-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 データを戻し、"data_box div.ハイパーリンクがクリックされたときに関数をトリガーしたい.そのリンクに「myFunction()」を呼び出すonclickがありますが、何もしません.さまざまなjQuery関数も使用してみましたが、何も機能しないようです.私もjQueryの外部を含むさまざまな場所にmyFunction関数を配置しようとしましたが、機能しませんでした。

4

3 に答える 3

1

そして、ここでスコーピングについて学びます。成功ハンドラー内で定義myFunctionしたため、成功ハンドラー内からのみ呼び出すことができます。ただし、スコープ<a href="...">内に存在しwindowます (成功ハンドラーでは意味のないテキスト文字列であり、append呼び出しにより、スコープにのみアクセスできる実際の HTML 要素に変換されるため)、関数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="#">、.<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 に答える