來自輸入的空值

Question

我不知道什麼是錯的...我其他js文件，這工作正常。 我的HTML：

<table class='table'> 
      <tr> 
       <th>Event</th><td><input class='form-control agenda-name' name='event_name' type='text'></td> 
      </tr> 
<tr> 
       <td><div class='btn btn-success save_newItem'>Opslaan</div></td> 
      </tr> 
     </table> 

我的jQuery代碼：

$(document).on("click", ".save_newItem", function(){ 
    var data = $('.agenda-name').val(); 
    alert(data); 
}); 

的問題是，它提醒一個空字符串。 我也試過console.log()，但也給了一個空字符串。

在這裏失蹤的東西？

編輯我在http://jsfiddle.net/內試過了，它工作得很好。 但是不是在我的腳本中，我也像往常一樣將我的腳本放在頁面底部（）。

我有一個生成一個擴展

function rightClick(item) { 
    console.log(item.currentTarget.attributes.extension_data.value); 
    $('.rightClick').removeClass('activeRightClick'); 
    var data = item.currentTarget.attributes.extension_data.value; 
    $('.rightClickExtension').load('index.php?extension=rightClick&data=' + data + ' .rightClickExtension .reloadme'); 
    $(item.currentTarget).addClass('activeRightClick'); 
    $('.rightClickExtension').css('display', 'none'); 
    $('.rightClickExtension').addClass('rightClickExtensionActive'); 
    var left = item.pageX; 
    var top = item.pageY; 
    $('.rightClickExtension').css('margin-left', left + 'px'); 
    $('.rightClickExtension').css('margin-top', top + 'px'); 
    $('.rightClickExtension').css('display', 'block'); 
} 
; 

$(document).on('click', '.rightClickExtension .reloadme table tbody tr td', function(e) { 
    $('.activeRightClick').addClass('old-deleted-item'); 
    var element = $(this).attr('data'); 
    if (element) { 
     var data_to_send = $('.activeRightClick').attr('extension_' + element); 
     $.post("index.php?extension=rightClick&type=" + element, {type: element, data: data_to_send}) 
       .done(function(data) { 
        if (element === 'remove') { 
         $('.old-deleted-item').remove(); 
        } else { 
         $('.old-deleted-item').removeClass('old-deleted-item'); 
        } 
        if (element === 'plus') { 
         $('.rightClickExtension_addscreen .data').load('index.php?extension=rightClick&extra=true .extension_rightClick_data_' + data_to_send + ' div'); 
         $('.rightClickExtension_addscreen').stop().animate({ 
          top: "10%" 
         }, 500); 
        } 
       }); 
    } 
}); 

而且我的全HTML是這樣的功能。

<div id='wrap'> 

     <div class='rightClick' id='calendar' extension_plus='Agenda' extension_data='plus'></div> 

     <div style='clear:both'></div> 
       <div class='more_info'> 
        <div class='close_moreinfo fa fa-close btn btn-danger'></div> 
        <div class='elements'> 
        <table class='table'> 
        <?php foreach($itembyID as $itembyID){ ?> 
         <tr> 
          <th>Toegevoegd door</th><td><?php echo $itembyID['fullname'] ?></td> 
         </tr> 
         <tr> 
          <th>Event</th><td><?php echo $itembyID['title'] ?></td> 
         </tr> 
         <tr> 
          <th>Van</th><td><?php echo date("d-m-Y", strtotime($itembyID['start'])) ?> : <?php echo $itembyID['start_time'] ?> </td> 
         </tr> 
         <tr> 
          <th>Tot</th><td><?php echo date("d-m-Y", strtotime($itembyID['end'])) ?> : <?php echo $itembyID['end_time'] ?> </td> 
         </tr> 
        <?php } ?> 
        </table> 
        </div> 
       </div> 
    </div> 

<div class='extension_rightClick_data_Agenda extension_rightClick_data'> 
    <div> 
     <h3>Agenda item toevoegen</h3> 
     <table class='table'> 
      <tr> 
       <th>Event</th><td><input class='form-control agenda-name' name='event_name' type='text'></td> 
      </tr> 
      <tr> 
       <th>Start</th><td><input class='form-control agenda_start' name='event_start' type='date'></td><td>Tijd</td><td><input name='event_start_time' class='agenda_start_time form-control' type='time'></td> 
      </tr> 
      <tr> 
       <th>Einde</th><td><input class='form-control agenda_end' name='event_end' type='date'></td><td>Tijd</td><td><input class='form-control agenda_end_time' name='event_end_time' type='time'></td> 
      </tr> 
      <tr> 
       <td><div class='btn btn-success save_newItem'>Opslaan</div></td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

好了，你的代碼正在工作，那麼你的結構就有錯誤。

呦需要有你的HTML標籤

<html> 
<body> 
    <script src="JQUERY.js"></script> 
    <script>HERE</script> 
</body> 
</html> 

現在之間你的腳本，你的代碼可能會更好。

<input class='form-control agenda-name' name='event_name' type='text'> 
<a class="btn btn-success save_newItem" href="javascript:;">Opslaan</a> 

請，如果你使用一個按鈕，使用真正的按鈕，不喜歡按鈕一個div，你可以，如果你使用的$（document使用按鈕元素或鏈接元素（）

<script type="text/javascript"> 
$(function(){ 
    $('.save_newItem').on("click",function(){ 
    var data = $('.agenda-name').val(); 
    }); 
}); 
</script> 

），每個事件的單獨功能

$('.save_newItem').on("click",function(){ 
    var data = $('.agenda-name').val(); 
}); 
//For example you can add other event. 
$('.other_button').on("click",function(){ 
    var data = $('.agenda-name').val(); 
    data = data.split("something"); 
    console.log(data); 
}); 

Answer 2

This Works。

你必須有一些其他的問題

$(function() { 
 
    $(document).on("click", ".save_newItem", function() { 
 
    var data = $('.agenda-name').val(); 
 
    console.log(data); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class='table'> 
 
    <tr> 
 
    <th>Event</th> 
 
    <td> 
 
     <input class='form-control agenda-name' name='event_name' type='text'> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class='btn btn-success save_newItem'>Opslaan</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

嘗試......

工作非常適合我...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<table class='table'> 
    <tr> 
     <th>Event</th><td><input class='form-control agenda-name' name='event_name' type='text'></td> 
    </tr> 
    <tr> 
     <td><div class='btn btn-success save_newItem'>Opslaan</div></td> 
    </tr> 
</table> 
<script> 
$(document).on("click", ".save_newItem", function(){ 
    var data = $('.agenda-name').val(); 
    alert(data); 
}); 
</script>