未定義（入力[テキスト]の値）のプロパティを設定することはできません

Question

私はinput[type='text']#page-nameと#page-urlからvalueプロパティを取得することはできません、それは未定義アップを示しています。

eventsDispatcher: function() { 
 

 
    var self = this; 
 

 
    $(".b-row a").click(function() { 
 

 
    var tileId = ("this").id; 
 
    $("#tile-edit").css("display", "block"); 
 

 
    $("#tile-edit-save").click(function() { 
 

 
     self.pageList[tileId].name = $("#page-name").val(); // -> here 
 
     self.pageList[tileId].url = $("#page-url").val(); // -> here 
 
     console.log(self.pageList[tileId].name); 
 
    }); 
 
    }); 
 
},

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="tile-edit"> 
 

 
    <form> 
 
    <table> 
 

 
     <tr> 
 
     <td> 
 
      <label for="page-url">Adress</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="page-url" id="page-url" class=""> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <label for="page-name">Name</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="page-name" id="page-name" class=""> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <input type="button" id="tile-edit-save" value="save"> 
 
     </td> 
 
     </tr> 
 

 
    </table> 
 
    </form> 
 

 
</div>

の残りの部分スクリプトは両方の.click関数のように正常に動作していますが、なぜ#page-nameと#page-urlの値が得られないのか分かりません。

Answer 1

私は推測しているが、("this").idはundefinedでなければなりません。

​​

Answer 2

あなたのHTMLに特殊文字があると思います。コピーしてプレーンテキストエディタに貼り付けても問題ありません。ここでform HTMLをコピーして貼り付けてみてください。

$('#tile-edit-save').on('click',function() { 
 
console.log($("#page-name").val()) 
 
console.log($("#page-url").val()) 
 
}); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <form> 
 
    <table> 
 

 
    <tr> 
 
     <td><label for="page-url">Adress</label></td> 
 
     <td><input type="text" name="page-url" id="page-url" class=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><label for="page-name">Name</label></td> 
 
     <td><input type="text" name="page-name" id="page-name" class=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="button" id="tile-edit-save" value="save"></td> 
 
    </tr> 
 

 
    </table> 
 
</form>