各機能のjQuery onclickイベント

Question

透明なレイヤーを編集ボタン付きの要素に追加しようとしています。編集ボタンにはonclick機能があります。 onclickで転送される値は、親要素（透明なレイヤーが追加される）のIDです。

私の問題は、すべての編集ボタンが残念ながら同じ値を持ちます：cms-block-3。

私は間違っていますか？

私は自分自身を正しく説明してくれることを願っています。前もって感謝します！ HTMLの

例：

<div class="editable cms-block-1">Some</div> 
<div class="editable cms-block-2">Someting else!</div> 
<div class="editable cms-block-3">Something else else! :)</div> 

$(document).ready(function() { 
    $('.editable').each(function(index) { 

     $($(this).attr('class').split(' ')).each(function() { 
      if (this !== '' && this.substring(0, 3) == "cms") { 
       element = this.toString(); 
      } 
     }); 

     var $t = $(this); 
     var offset = $t.offset(); 
     var dim = { 
      left:    offset.left, 
      top:    offset.top, 
      width:    $t.outerWidth(), 
      height:    $t.outerHeight() 
     }; 

     $('<div class="editable-focus"></div>').css({ 
      position:    'absolute', 
      left:        dim.left + 'px', 
      top:        dim.top + 'px', 
      width:        dim.width + 'px', 
      height:        dim.height + 'px' 
     }).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />'); 
    }); 
}); 

Answer 1

を（あなたが道でその宣言の前にvarを除外することにより、グローバル変数として定義するべきではありません）、あなたのボタンのHTMLは、文字通り

<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" /> 

ベースをされて終わりますあなたの説明に、それはむしろ

<input type="button" value="Edit" class="edit-btn" onclick="edit_area('some_id')" /> 

のようなものでなければなりません。しかし、現在のHTMLで、これはどちらか動作しないように、もう一度、あなたの編集可能なdiv要素はIDを持っていません。

elementと書くと、実際にはwindow.elementが参照され、割り当てられた最後の値が返されます。

$('.editable').each(function(index) { 
    var element; // ADD THIS TO MAKE element A LOCAL VARIABLE 

    // [...] 

    var $button = $('<input type="button" value="Edit" class="edit-btn" />'); 
    $('<div class="editable-focus"></div>').css({ 
     position: 'absolute', 
     left:  dim.left + 'px', 
     top:  dim.top + 'px', 
     width:  dim.width + 'px', 
     height:  dim.height + 'px' 
    }).appendTo(document.body).append($button); 

    // And now you can write your event handler without fuss like this: 
    $button.click(function() { alert(element); }); 

See it in action：

は、ここで修正です。

Answer 2

あなたが変わる「要素」ではない変数自体の値を挿入する必要があります。このため、毎回最終的な値 "cms-block-3"が表示されます。

変更：

onclick="edit_area(element)" 

へ：ので

}).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(\''+element+'\')" />'); 

：

onclick="edit_area(\"'+element+'\")" 

Answer 3

代わりに入力する変数自体のelement変数の内容を追加する必要があります要素変数は常にループ内の最後の要素の値になります。このコードでは

Answer 4

あなたのコードです。

要素はグローバルオブジェクトです。 次に、ボタンをonclick = "edit_area（element）"で作成しました。

ボタンをクリックすると、ブラウザはグローバルオブジェクトの要素を関数に渡します。しかし、の要素には、反復で割り当てた最後の値があります。

Answer 5

まず、elementを宣言していないので、グローバル変数です。第二に

：

'<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />' 

は、それはあなたがそれを作成しているコンテキストのないアイデアを持っていない、単なる文字列なので、edit_area(element)は、グローバルコンテキストで呼び出されます。これは便宜上、elementを宣言するのを忘れてしまい、グローバル変数であるためエラーをスローしません。

と交換してください：

.append($('<input>', { 
    type: "button", 
    val: "Edit", 
    'class': "edit-btn", 
    click: function() { 
     edit_area(element); 
    } 
})); 

そして、ここでの問題は、あなたの入力ごとにonlickハンドラは "edit_area（要素）"

要素がある等しいことであるelement

$('.editable').each(function(index) { 
    var element; 
.... 

Answer 6

を宣言変数は1つの値しか持たない（すなわち、与えられた最後の値）

あなたがここでやりたいことは、変数の参照ではなく要素の値を渡すことです。

$('<div class="editable-focus"></div>').css({ 
      position: 'absolute', 
      left:  dim.left + 'px', 
      top:  dim.top + 'px', 
      width:  dim.width + 'px', 
      height:  dim.height + 'px' 
     }).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(\'' + element +'\')" />'); 

この修正されたコードは、このトリックを行う必要があります。

私の推測では、あなたの関数edit_areaは入力として文字列を期待していませんが、おそらくDOM要素かjQueryオブジェクトを期待していますか？

コードを変更する場所によっていくつかの修正があります。 これを修正する最も簡単な方法は、関数にパラメータとして渡すcssクラスに基づいてdom要素を取得することです。

は、だからあなたのedit_area関数の先頭にだけ追加します。

var myElement = $('.' + element);