Question

我一直在努力弄清楚为什么按键赢得了工作。不，我的意思是它正在工作，但返回的结果是json。当我按下Post按钮时，我想返回html。如何使输入键和按钮单击功能相同？谢谢！到目前为止，这是我的代码。

注意：单击post comment按钮后代码正常工作但如果按enter键，则返回json数据。

JS：

function commentApp(item_id){
  $('.js-post-button').on('keypress click', function(e){
    var url = $('form#js-post-comment').attr('action');
    if (e.which === 13 || e.type === 'click') {
    $.ajax({
      type     : 'POST',
      url      : url,
      dataType : 'json',
      data     : $('#js-post-comment').serialize(),
      success  : function(result) {
        $('#js-input-comment').val('');
        showComments(item_id);
      }
    });
    }
  });
}

function showComments(item_id) {
  var url = $('#js-comment').attr('data-url');
  $.ajax({
    url       : url+'/comments/'+item_id,
    type      : "POST",
    dataType  : "html",
    success   : function(result) {
      $('#js-comment').html(result);
    }
  });
}

PHP：

$data = array(
      'checklist_item_id' => $id,
      'comment'           => $this->input->post('comment'),
      'date_posted'       => date('Y-m-d h:i:s'),
      );

    $this->item_comments->insert($data);
    echo json_encode($data);

HTML：

<form id="js-post-comment" method="post" role="form" action="<?php echo site_url('document_items/add_comment/'.$value['checklist_item_id'])?>">
   <div class="input-group">
    <input id="js-input-comment" type="text" class="form-control" name="comment" placeholder="Write a comment...">
     <span class="input-group-btn">
       <button class="js-post-button btn btn-default" type="button">Comment</button>
     </span>
    </div><!-- /input-group -->
</form>

Answer 1

我认为你的问题是你使用了错误的事件。

在您的代码中，您在keypress & click上注册.js-post-button事件，这意味着点击了按钮或按钮具有按键。

您可以看到以下代码：http://jsbin.com/duteziraza/edit?html,js,console,output

您可以看到每个事件的调用时间。

也许更改您的keepress事件，因为以下内容可以解决您的问题：

function submitFunction(item_id){
  console.log('in submit function');
  var url = $('form#js-post-comment').attr('action');
  $.ajax({
      type     : 'POST',
      url      : url,
      dataType : 'json',
      data     : $('#js-post-comment').serialize(),
      success  : function(result) {
        $('#js-input-comment').val('');
        showComments(item_id);
      }
    });
}

function commentApp(item_id){
  $('.js-input-comment').keypress(function(e){
    if (e.which === 13){
      e.preventDefault();
      submitFunction(item_id);
    }
  });

  $('.js-post-button').on('click', function(e){
    submitFunction(item_id);
  });
}

Answer 2

您应该在表单上收听提交事件：

$('#js-post-comment').on('submit', function(event) {
  event.preventDefault(); // stop form from making native submit

  var url = $(this).attr('action');
  $.ajax({
    type     : 'POST',
    url      : url,
    dataType : 'json',
    data     : $(this).serialize(),
    success  : function(result) {
      console.log('Do something with result:');
      console.log(result);
    }
  });
});

Answer 3

我想分享javascript代码，帮助您在按下回车键时调用函数

<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if(x == 13){
youWantToCall();
}
function youWantToCall(){
alert('you type enter key');
}
}
</script>

Answer 4

您还可以检测按下的键并执行某些功能。例如，在＆＃34;输入/返回＆＃34;键，触发提交功能。在http://www.moreonfew.com/how-to-identify-keycode-or-key-pressed-in-jquery/

找到它

按Enter键时调用点击功能

4 个答案: