Question

http://jsfiddle.net/cZDfe/

我有一个html和jquery代码...... 我的需要是 1.按下加号按钮添加相同的表格组项目（这是有效的） 2.当选择的选项为“Between”时，显示第二个输入框..（在这种情况下，只有第一组s正常工作，当添加第二组时还有一个问题，那么更改第一组选择，第二组也是改变。）

$(document).ready(function () {
$('.condition-change').change(function () {
    if ($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected") == true) {
        $('.second-value').css("display", "block");
    }
  });
     $(document).on('click', '.btn-Add', function () {
        $(document).find('.btn-Add').remove();
        $('#othersearch').append('<div class="form-group"><select class="form-control input-sm"><option value=">=">Greater than or equal to</option><option value="<=">Less than or equal to</option><option value="<>">Between</option></select><input type="text" class="form-control input-sm" placeholder="Value"> <input type="text" class="form-control input-sm second-value" placeholder="Value" style="display:none;"><input type="button" class="btn btn-default btn-Add" value="+" /></div></br>'); // end append           
    });
});

  <form class="form-inline">
               <div class="form-group">
               <select class="form-control input-sm condition-change" name="SearchCondition">
                   <option value=">=">Greater than or equal to</option>
                   <option value="<=">Less than or equal to</option>
                   <option value="<>">Between</option>
               </select>
               <input type="text" class="form-control input-sm" placeholder="Value">
               <input type="text" class="form-control input-sm second-value" placeholder="Value" style="display:none;">
               <button type="button" class="btn btn-default btn-Add">+</button>

        </div>
        <div id="othersearch"></div>
   </form>

Answer 1

发现问题：

select元素缺少事件委托。
未在动态内容中指定类名condition-change。
$(this)引用未在代码中的任何位置使用。

这是你的代码，

$(document).ready(function () {

    $(document).on('change','.condition-change',function () {
        if($(this).val().trim() === "<>") {
           $(this).closest('.form-group').find('.second-value').show();
        }
    });

    $(document).on('click', '.btn-Add', function () {
            $(document).find('.btn-Add').remove();
            $('#othersearch').append('<div class="form-group"><select class="form-control input-sm condition-change"><option value=">=">Greater than or equal to</option><option value="<=">Less than or equal to</option><option value="<>">Between</option></select><input type="text" class="form-control input-sm" placeholder="Value"> <input type="text" class="form-control input-sm second-value" placeholder="Value" style="display:none;"><input type="button" class="btn btn-default btn-Add" value="+" /></div></br>'); // end append           
    });
});

DEMO

Answer 2

第一个问题是您没有隔离您的组，以便在您更改第一组的选择时，它会显示所有组的输入。您遇到的第二个问题是您只将更改处理程序绑定到第一个选择，而不是绑定到所有选择。解决此问题的最简单方法（尽管不一定是最好的）可能是使用on而不是change然后更新仅更改组中输入的显示：http://jsfiddle.net/cZDfe/2/ < / p>

Answer 3

以下是查看以下内容的JSFiddle。

以正确的方式执行此操作不仅仅需要修补问题代码。可以更容易地实现目标。

$(function () {
    var between = function() {
        $(this).siblings('input.second-value').toggle($(this).val() == "<>");
    }
    $('#add').click(function() {
        var clone = $('.clone').first().clone();
        $('.clone').last().after(clone);
        $('.clone').last().children('input').val('');
        $('.clone').last().children('input.second-value').hide();
        $('.clone').last().children('select.condition-change').change(between);
    });
    $('.condition-change').change(between);
});

要创建新的表单行，我们将第一个div克隆为新div（放在最后一个之后）并清除旧内容。要添加第二个值字段，我们会检查更改并根据需要显示或隐藏它们。

<form class="form-inline">
    <div class="form-group clone">
        <select class="form-control input-sm condition-change" name="SearchCondition">
            <option value=">=">Greater than or equal to</option>
            <option value="<=">Less than or equal to</option>
            <option value="<>">Between</option>
        </select>
        <input type="text" class="form-control input-sm" placeholder="Value"></input>
        <input type="text" class="form-control input-sm second-value" placeholder="Value"></input>
    </div>
    <button type="button" id="add" class="btn btn-default">+</button>
</form>

当然，既然HTML有div之外的按钮（它应该是这样的），我们需要确保它正确定位这个CSS，每个克隆div清除按钮/前一个div ，按钮漂浮在它上面。

#add { float: left; }
.clone { float: left; clear: left; }
.second-value { display: none; }

Jquery条件未应用于附加的div中

3 个答案:

DEMO