Question

我正在尝试使用Javascript将按钮中的值传递给输入值。我现在拥有的是这个

这是一个javascript文件

var test2 = 5;
appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="' + test2 + '">This is it!</button></div>';
$("#test1").append(appendeddatahtml);

这是脚本

上面的表格

<input type="text" name="latlon" id="latlon" style="display: none; " value="" />

首先，我尝试使用此代码发出提醒

$(document).ready(function() {
  $("#btn").click(function() {
    alert("The button was clicked.");
  });
});

但它没有提醒任何事情。有没有办法将值从按钮传递给输入值？

Answer 1

由于您要动态添加，因此您需要 event delegation 。所以只需添加点击如下：

$(document).on('click',"#btn",function(){
    alert("The button was clicked.");
});

<强> DEMO Here

Answer 2

您似乎已经在运行时通过代码动态创建了按钮，对于您需要使用实时或事件的元素

http://api.jquery.com/on/

这个会有所帮助

示例：

$(document).ready(function() {
    $(document).on('click', "#btn", function() {
        alert('here');
    });
});

Answer 3

在这里工作只需删除$（document）.ready（）

var test2 = 5 ;
appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>';
 $("#test1").append(appendeddatahtml); 

  $("#btn").click(function(){
    alert("The button was clicked.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="latlon" id="latlon" style="display: none; " value="" />
<div id="test1"></div>

Answer 4

您尚未首先创建该元素。

你忘了$（）;

var test2 = 5 ;

 appendeddatahtml = $('<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>');
   $("#test1").append(appendeddatahtml);

Answer 5

链接到您想要的工作示例here

html代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="latlon" id="latlon" style="display: block; " value="" />
<div id="test1">
</div>

javascript代码

$(document).ready(function() {
    var test2 = 5 ;
    var appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>';
                        $("#test1").append(appendeddatahtml);
    $("#btn").click(function(){
        alert("The button was clicked. "+this.value);
        document.getElementById('latlon').value = this.value;
    });
});

将值从按钮传递到输入值

5 个答案: