Question

我想通过文本框ID执行keyup事件，所有文本框都是通过onclick按钮事件动态创建的。为此我必须做20键功能。如果我使用20键盘功能，那么我的代码将变得过于冗长和复杂。而不是这个我想使用所有文本框的常用功能。任何人都可以建议我怎么做..谢谢

这就是我要解决的问题：

<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button></div>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
    </div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script>
$(document).ready(function() {
    var counter = 2;
    $(".add_field_button").click(function() {
        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
            '<input type="text" name="textbox' + counter +
            '" id="firsttextbox' + counter + '" value="" >&nbsp;&nbsp;<input type="text" name="textbox' + counter +
            '" id="secondtextbox' + counter + '" value="" >  <a href="#" id="remove_field">Remove</a><input type="text" id="box' + counter + '" value="">sum</div>');
        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;

    });

    function check(a, b) {
        var first = a;
        var second = b;
        var temp = temp;
        var novalue = "";
        result = parseInt(first) + parseInt(second);
        if (!isNaN(result)) {
            return result;
        } else {
            return novalue;
        }
    }


    $(this).on("keyup", "#firsttextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;
        var number = 2;
        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#firsttextbox3", function(e) {
        var number = 3;
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);
        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#firsttextbox4", function(e) {
        var number = 4;
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);
        final = document.getElementById('box4').value = result;
    });

    $(this).on("keyup", "#secondtextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;

        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#secondtextbox3", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);

        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#secondtextbox4", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);

        document.getElementById('box4').value = result;
    });


    $(this).on("click", "#remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('#target').remove();
        counter--;

    });


});
</script>

Answer 1

请参阅下面的代码段，了解如何使此实施更加模块化和可用。诀窍是想：我想做什么？我希望能够添加多个输入并添加它们的值，将结果打印在另一个输入中。

归结为使用classes - 因为我们将为每一行使用相同类型的东西。然后应用适用于所有类的东西。没有ID！您甚至可以使用包含要保存的值的输入的name属性。使用该属性中的[]甚至会在POSTING时将一个很好的数组传回给你！

我知道这看起来很令人生畏，但删除了我的注释，行数明显减少，这种代码几乎可以无限扩展和重复使用。

但是看看，这很有效，而且最简单 - 最重要的是它干了（don't repeat yourself 0一旦你做了，重新评估，因为应该有更好的方法！）！< / p>

更新

您还可以使用<ol>作为包装，然后每次都为此添加<li>，这样您就可以自动计算前端的方框而无需您的任何努力！实际上，对我来说这很好，我改变了我的实现。

＆＃13;

var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;

add.click(function(event){
    
    // create a limit
    if($(".box").length >= maximumBoxes){
        alert("You cannot have more than 10 boxes!");
        return;
    }
        
    var listItem = $('<li class="box"></li>');
    // we will add 2 boxes here, but we can modify this in the amountOfBoxes value
    for(var i = 0; i < amountOfInputs; i++){
        listItem.append('<input type="text" class="input" />');
    }
    listItem.append('<input type="text" class="output" name="value" />');
    // Lets add a link to remove this group as well, with a removeGroup class
    listItem.append('<input type="button" value="Remove" class="removeGroup" />')
    listItem.appendTo(all);
});

// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event){
    // Get the group
    var group = $(this).parent();
    // Get the children (all that arent the .output input)
    var children = group.children("input:not(.output)");
    // Get the input where you want to print the output
    var output = group.children(".output");
    // Set a value
    var value = 0;
    // Here we will run through every input and add its value
    children.each(function(){
        // Add the value of every box. If parseInt fails, add 0.
        value += parseInt(this.value) || 0;
    });
    // Print the output value
    output.val(value);
});

// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event){
    event.preventDefault();
    $(this).parent(".box").remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />

＆＃13;

Answer 2

您可以使用以下简单的函数定位所有文本框，无论是现在还是将来，无论其编号如何：

$(document).on("keyup", "input[type=text]", function(){
   var $textbox = $(this);
   console.log($textbox.val());
})

$("button").click(function(){
   $("#container").append('<input type="text" /><br>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="text" /><br>
  <input type="text" /><br>
  <input type="text" /><br>
</div>
<button>Create one more</button>

您不需要复杂的生成ID，不一定是类（除非您有其他input[type=text]您不想与之冲突）。而且您不需要复制代码并写入相同功能的20倍。自从。如果你复制代码，那你就错了。

Answer 3

提供一个代码片段，可能会给你一些提示：

$(".add_field_button").click(function () 
{
    if (counter > 10) 
    {
        alert("Only 10 textboxes allow");
        return false;
    }
    var txtBoxDiv = $("<div id='TextBoxDiv"+counter+"' style='float:left;width:10%; position:relative; margin-left:5px;' align='center'></div>");

     //creating the risk weight
     var txtBox1 = $('<input />', 
                           {
                            'id'     : 'fst_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                            'onClick' : 'txtBoxFun(this,'+counter+')'
                          });
     var txtBox2 = $('<input />', 
                           {
                            'id'     : 'sec_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                            'onClick' : 'txtBoxFun(this,'+counter+')'
                          });

    var txtBox3 = $('<input />', 
                           {
                            'id'     : 'sum_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                          });

 $(txtBoxDiv).append(txtBox1).append(txtBox2);
 $(txtBoxDiv).append(txtBox3);
});

function txtBoxFun(obj, count)
{
   var idGet = $(obj).attr('id');
   var idArr = new Array();
   idArr = idGet.split("_");
   if(idArr[0] == "fst")
   {
      var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#sec_textbox_"+count).val()));
   }
   else if(idArr[0] == "sec")
   {
      var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#fst_textbox_"+count).val()));
   }
   $("#sum_textbox_"+count).val(sumTxt);

}

Answer 4

您可以为要执行keyup事件的所有文本框分配class，而不是使用此class，您可以将事件附加到具有var html=""; for (var i = 0; i < 20; i++) { html += "<input type='text' id='txt" + i + "' class='someClass' />"; } $("#testDiv").html(html);的元素上}。这是一个例子

keyup

将someClass事件附加到具有类$(".someClass").keyup(function () { alert($(this).attr("id")); });的元素。

var query = from item in context.Dealers
            where item.ManufacturerId == manufacturerId
            select item;

IList<DealerReport> list = new List<DealerReport>();

foreach (var deal in query)
{
  foreach (var bodyshop in deal.Bodyshops1.Where(x => x.Manufacturer2Bodyshop.Select(s => s.ManufacturerId).Contains(manufacturerId)))
  {
      DealerReport report = new DealerReport();
      report.Dealer = deal.Name;
      report.Bodyshop = bodyshop.Name;
      short stat = bodyshop.Manufacturer2Bodyshop.FirstOrDefault(x => x.ManufacturerId == manufacturerId).ComplianceStatus;
      report.StatusShort = stat;
      list.Add(report);
   }
}

return list.OrderBy(x => x.Dealer).AsQueryable();

Answer 5

与您最喜欢的答案相结合的小帮手：

var uid = function () {
    var id = 0;
    return function () {
        return ++id;
    };
}();

用法：

uid(); // 1
uid(); // 2
uid(); // 3

Answer 6

添加课程＆＃34; a＆＃34;和＆＃34; b＆＃34;到文本框和＆＃34;框＆＃34;到盒子里。然后使用索引添加data-idx属性（未使用！？）。最后注册事件处理程序：

 $('.a').on('keyup', function(e){
    e.preventDefault();
    var $this = $(this)
    var $p = $this.parent()
    var a= this.value; 
    var b= $p.find('.b').val()
    var number =$this.data('idx') //unused!?
    var result = check(a,b)
    $p.find('.box').val(result)
 })
 $('.b').on('keyup', function(e){
    e.preventDefault();
    var $this = $(this)
    var $p = $this.parent()
    var a= $p.find('.a').val()  
    var b= this.value
    var result = check(a,b)
    $p.find('.box').val(result)
 })

或者一般的：

 $('.a,.b').on('keyup', function(e){
    e.preventDefault();
    var $p = $(this).parent()
    var a= $p.find('.a').val()  
    var b= $p.find('.b').val()
    var result = check(a,b)
    $p.find('.box').val(result)
 })

如何在jquery中获取动态创建的文本框的动态id

6 个答案:

更新