如何更改稍後使用jQuery添加的html元素？

Question

我有以下問題：

<div class="container"> 
     <button id="buttonOne">ButtonOne</button> 
     <button id="buttonTwo">ButtonTwo</button> 
    </div> 
    <p id="myParagraph"> 
    <br> 
    </p> 

而且下面的腳本：

<script> 

var appendedInput = $('#buttonOne').one("click", function(event) { 
    var myInput ="<input name=inputOne id="inputOneId"></input>; 
    $('#myParagraph').append(myInput); 
;}) 

</script> 

編輯

確定。所以我想讓按鈕2像按鈕1一樣執行，並且在按鈕不存在的情況下在同一段落中追加一個新元素，或者用按鈕兩個生成的輸入更改#myInput。我希望現在更清楚。現在我甚至在思考爲什麼我要這樣做... 所以我的問題是，我如何讓我的腳本執行這樣的功能？ 如果尚未出現的元素將存在，那麼如何更改該元素而不是將新元素添加到同一段落。我很抱歉它讓人感到困惑，我也發現我的問題很混亂，這是一個獲得答案的地方。

後來編輯代碼 隨着幫助爵士隊現在我想你.append混合.html和得到的東西似乎打算。

<script> 
    var inputOne ="<input name='inputOne' id='inputOneId'></input>"; 
    var inputTwo ="<input name='inputTwo' id='inputTwoId'></input>";  

    var appendedInputOne = $('#buttonOne').one("click", function(event) { 
     $('#myParagraph').append(inputOne); 
;}) 

var appendedInputTwo = $('#buttonTwo').one("click, function(event) { 
    $('#myParagraph').append(inputTwo); 
</script> 

現在再次出現以下情況。如果按鈕一被點擊，然後！按鈕2被點擊，我們有2個輸入字段，我們總共只需要1個輸入字段。如果沒有輸入字段，則只能追加按鈕二。我是正確的切換到PHP，並從PHP解決這個問題。但它仍然是一個偉大的Javascript問題笑

Answer 1

替換成其附加

以.html（值）

<script> 

    $("#buttonOne").on("click", function(event) { 
      var myInput = "<input id='idInput' name='inputMe'></input>"; 
      $('#myParagraph').html(myInput); 
    }); 

    $("#buttonTwo").on("click", function(event) { 
      var myInput = "<input id='idInput' name='inputMe'></input>"; 
      $('#myParagraph').html(myInput); 
    }); 

    </script> 

Answer 2

使用這樣:button Selector

<script> 

var appendedInput = $(':button').on("click", function(event) { 
    var myInput = "<input id='idInput' name='inputMe'></input>"; 
    $('#myParagraph').append(myInput); 
;}) 

</script> 

Answer 3

所以，如果我理解的你正確地有2個按鈕，如果第一個按鈕被點擊，它應該在<p id="myParagraph">內附加一個輸入字段，這就像你已經有：

$('#buttonOne').one("click", function(event) { 
    var myInput = "<input id='idInput' name='inputMe'></input>"; 
    $('#myParagraph').append(myInput); 
}); 

如果第二個按鈕被點擊被點擊的第一個前應該具有相同的功能第一次點擊處理程序，所以首先重構它變成一個功能：

function appendInput() { 
    var myInput = "<input id='idInput' name='inputMe'></input>"; 
    $('#myParagraph').append(myInput); 
} 

$('#buttonOne').one("click", function(event) { 
    appendInput(); 
}); 

現在我們添加第二個按鈕一個新的單擊處理程序，來檢查，如果輸入的存在，並進行相應處理情況：

function appendInput() { 
    var myInput = "<input id='idInput' name='inputMe'></input>"; 
    $('#myParagraph').append(myInput); 
} 

function changeInput() { 
    var myInputValue = $('#idInput').val(); // get value of input field 
    myInputValue = myInputValue + " <- changed"; // do your value changing here 
    $('#idInput').val(myInputValue); // set value back to input field 
} 

$('#buttonOne').one("click", function(event) { 
    if(!$('#idInput').length) { //this evaluates to false if the element exists 
     appendInput(); 
    } 
}); 


$('#buttonTwo').on("click", function(event) { 
    if(!$('#idInput').length) { //this evaluates to false if the element exists 
     appendInput(); 
    } else { 
     changeInput(); 
    } 
}); 

我希望幫助你，如果不是隨便再問Ø r澄清你的要求。

function appendInput() { 
 
    var myInput = "<input id='idInput' name='inputMe'></input>"; 
 
    $('#myParagraph').append(myInput); 
 
} 
 

 
function changeInput() { 
 
    var myInputValue = $('#idInput').val(); // get value of input field 
 
    myInputValue = myInputValue + " <- changed"; // do your value changing here 
 
    $('#idInput').val(myInputValue); // set value back to input field 
 
} 
 

 
$('#buttonOne').one("click", function(event) { 
 
    if(!$('#idInput').length) { //this evaluates to false if the element exists 
 
     appendInput(); 
 
    } 
 
}); 
 

 

 
$('#buttonTwo').on("click", function(event) { 
 
    if(!$('#idInput').length) { //this evaluates to false if the element exists 
 
     appendInput(); 
 
    } else { 
 
     changeInput(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <button id="buttonOne">ButtonOne</button> 
 
     <button id="buttonTwo">ButtonTwo</button> 
 
</div> 
 
<p id="myParagraph"> 
 
    <br> 
 
</p>

Answer 4

解決了這個用普通的JavaScript，而不是jQuery的，並改變一些HTML的。這是我正在尋找的東西..

<html> 
<head> 
<script> 
    function myFunction() { 
    document.getElementById("demo").innerHTML = "edited"; 
    } 
    function mySecondFunction() { 
    document.getElementById("demo").innerHTML ="<input></input>"; 
    } 
</script> 
</head> 

<body> 

<h1>JavaScript in Head</h1> 

<p id="demo">A Paragraph.</p> 

<button type="button" onclick="myFunction()">Try it</button> 
<button type="buttonOne" onclick="mySecondFunction()">Try Again</button> 

</body> 
</html>