在输入框父元素之外添加一个div

Question

我对JavaScript还很陌生，尽管我尝试过研究，但我仍然无法弄清楚。 我如何跟踪div内输入的更改并触发添加到外部div？我的代码如下：

一旦“.image-value”输入值发生更改，请使用“Pending”追加h3。

<!-- APPEND <h3> -->
<h3>Best Overall Costume<div class="pending">Pending</div></h3>
<div>
  <div class="select-form">
    <img src="images/vote.jpg" data-value="image_value">
    <img src="images/vote.jpg" data-value="image_value2">
    <img src="images/vote.jpg" data-value="image_value3">
    <img src="images/vote.jpg" data-value="image_value4">
    <img src="images/vote.jpg" data-value="image_value5">
    <!-- Track the change of this input -->
    <input type="hidden" class="image-value" name="selected_image" value="">
  </div>
</div>

我尝试了这个：

function changeStatus(statusValue) {
    $("input",".select-form").val(statusValue).trigger("change");
}

$("input",".select-form").change(function(){
    if (!$(this).val()){
        $("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this)));
    }
});

但是似乎这并没有起作用。有什么想法吗？

- lancey

Answer 1

我在这里做了几件事... 首先，我不确定为什么你把它都放在一个命名函数中。当你使用事件监听器时，通常不需要这样做。

然后，我不知道val检查是用来干什么的，所以我反转了它。

最后，我使用one()，它只运行一次。这种情况似乎需要这样做。

$('.select-form').one('change', 'input', function () {
    if ( $(this).val() ) { alert('asdgf');
        $("<div class='pending'>Pending</div>")
            .appendTo($(this).parent().prev('h3'));
    }
});

小提琴

- isherwood

Answer 2

在您想要新的 div 的位置放置一个空的 div 并给它一个 id，例如(<div id='myDiv'><div>)，然后像这样附加您想要的内容。

$( "#myDiv" ).append( "<div class='pending'>Pending</div>" );

你还可以查看附加说明，以获取更多解释。

谢谢。

- Meer

Answer 3

试试这个：

$("input",".select-form").on("change", function(){
     var $this = $(this);
     if (!$this.val()){
            var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');                
            $this.parent().parent().before(elem);
     }
});

你也可以加入一个检查，如果待添加的div已经被添加过，那么不要再次添加。

当然，这个解决方案假设目标div（您想附加的div之前）和输入控件之间没有其他嵌套的div。

- Manish Mishra