Передайте значение от кнопки до значения ввода

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

Вы не создали элемент первой.

Вы забыли $();

var test2 = 5 ; 

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

Answer 4

здесь работает только удалить $ (документ) .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 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; 
    }); 
});