为啥我需要单击两次才能在输入字段中生成一个值

Posted 2023-05-07

【中文标题】为啥我需要单击两次才能在输入字段中生成一个值

【英文标题】：Why I need to click twice to generate a value in input field为什么我需要单击两次才能在输入字段中生成一个值

【发布时间】：2021-10-15 16:40:55

【问题描述】：

我使用 codeigniter 框架开发了一个页面。以下是控制器中的代码部分。 这会创建几组按钮和输入字段。当我单击每个按钮时，值应该添加到相关的输入字段中。一切正常。但问题是我必须在按钮上单击两次。一旦我单击两次，就会开始出现值。如果我继续单击其他按钮，则一键在相关输入字段中生成值。第一个按钮单击需要双击。 （不是订单的第一个按钮。我需要点击两次才能从中间的按钮开始）。

另外，如果我单击两个不同的按钮（每个按钮 1 次）。然后通过第二次单击将值添加到两个输入字段中。

另外根据***问题的先前答案中的方向，我尝试将其更改为

$test .= '<input type="button"

而不是

$test .= '<button 

但是没有运气。如果有人能给我这个问题的线索，我真的很感激。

foreach ($data as $c) 
  foreach ($c as $value) 
    
    //There are some codes here 
    //But there are no <form> elements in this area.

    $test .= "&emsp;&emsp;<a>reply</a><br>";
    $test .= '<input type="text" id="new_reply' . $value['id'] . '"  class="form-control">';
    $test .= '<button data-comment-id="' . $value['id'] . '" onclick="test_function(this);">Reply</button>';

  


echo json_encode($test);

这是我的 js 函数。请注意，这不是此功能的最终目的。我将其更改为非常简单的东西来识别问题。也表达我的问题。

$(document).ready(function()
    test_function();
)


function test_function(reply)
  $("button").click(function() 
        var comment_id = reply.getAttribute("data-comment-id");
        if(comment_id)
            var inputbox_id = "new_reply" + comment_id;
            document.getElementById(inputbox_id).value ='test value';
        
  );

这是页面的示例图片

编辑 1

在我的视图文件中，我有这样的代码。

<div id="page_content" class="text-dark"></div>

然后使用ajax方法我添加这样的内容

$('#page_content').html(response);

所以我注意到实际上只有当我单击按钮时才会单击 div 元素。

我用这些函数来测试这个

$(document).ready(function()
    Insert_record();
    view_content();
    insert_reply(this);
)

function insert_reply(reply)
$("div").click(function() 
    console.log("USA");
    $("button").click(function() 
        //insert_reply(this);
        console.log("Argentina");
    );
);

当我单击一个按钮时，结果是这样的。

当我第二次点击时，控制台变成了这个。

【参考方案1】：

jQuery 函数 $.click() 将事件监听器绑定到按钮，但它仅在已经从 onclick 属性调用 test_function() 之后才会这样做。

您的第一个按钮单击附加了侦听器。第二次点击实际上会触发它。 您可能希望在 $(document).ready 中附加事件侦听器，这样它们就会在它们准备好后立即附加到您的按钮：

$( document ).ready(function() 
  // attach event listeners here
);

【讨论】：

感谢您的回答。你的意思是这样的吗？ $(document).ready(function() test_function(); )我也编辑了我的问题。但仍然是同样的问题。

【参考方案2】：

我无法理解这个$("button").click(function() ，因为您在点击本身时调用test_function()，那么为什么您需要再次检查？ here你可以理解其中的区别。

这需要是一个简单的点击右键函数调用吗？

function test_function(reply)
        console.log("hello");
        var comment_id = reply.getAttribute("data-comment-id");
        if(comment_id)
            var inputbox_id = "new_reply" + comment_id;
            console.log(comment_id);
            document.getElementById(inputbox_id).value ='test value';
        

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>reply</a><br>
  <input type="text" id="new_reply1234"  class="form-control">
<button data-comment-id="1234" onclick="test_function(this);">Reply</button>

对不起，如果这个答案无关紧要，但这是我从你提供的信息中可以理解的。