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

这很有效。

您必须有其他问题

$(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 2

试试这个......

对我来说很棒......

<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>

Answer 3

好的，你的代码正常运行，那么你的结构就会出错。

你需要在你的HTML标签之间加上你的SCRIPT

<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，您可以使用按钮元素或链接元素（）

<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);
});

来自输入的空值

3 个答案: