將文本框動態添加到使用Mysql Jquery生成的每一行中的錯誤

Question

我一直在嘗試為從數據庫生成的每一行單擊按鈕創建動態文本框。 但是在單擊add（+）按鈕時，這些框將被附加到數據庫的所有行之后，而不是我在每一行之后單擊的位置。 這是我到目前為止嘗試過的。

// jQuery函數

$('#f2 .add-box').click(function(){

var box_html = $('<p class="text-box"><label for="box">Subtask</label> <a href="#" class="remove-box btn-sm btn-primary btn-remove"><span class="glyphicon glyphicon-remove"></span></a> <input type="text" name="boxes[]" class="form-control" value=""> </p>');
        box_html.hide();
       $('#f2 p.text-box').append(box_html);
        box_html.fadeIn('slow');
        return false;
    });

// php代碼

 while($row =mysqli_fetch_array($res))
            {   
                echo "<div class='rowDiv' id='" . $row['id'] ."' contenteditable='true'>" . $row['desc'] . "</div>";
                echo " <p class='text-box'> <a class='add-box' href='#' rel='" . $row['id'] ."' ><span class='glyphicon glyphicon-plus'></span></a></p><br/>";

          }

非常感謝任何幫助。

Answer 1

您遇到的問題是由無效的HTML標記引起的。

在您的代碼中，您將<p>標記彼此嵌套，這在HTML中是不允許的。

一個簡單的解決方法是將您的<p>標記更改為<div>

請查看此問題和答案以獲取更多詳細信息： 嵌套<p>將不起作用，而嵌套<div>將起作用嗎？

Answer 2

感謝Ethnar的回答。 最后的小提琴在這里找到
jsfiddle.net/Lfh6qoov/1

簽出第8行。$（this）指代被單擊的按鈕。 我已將.after（）替換為.before（），以使子任務的順序更加合理，並且“ +”結束於添加子任務的位置。 問題是您的選擇器正在引用文本框類，並且恰好有一個實例，因此最終在帶有輸入的整個HTML塊之后添加了項