Невозможно установить свойство не определено (входное значение [текст])

Question

Я не могу получить свойство значения от input[type='text']#page-name и #page-url, он показывает не определено:

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. Вы можете изменить его:

var tileId = $(this).attr('id'); 

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>