jQuery use dynamically created ID

Question

I am trying to use dynamically created IDs in javascript function, but it's not working. I thought that prepending # to string id should work, but it's not.

Code:

var IterateCheckedDatesAndUncheckWithSameValue = function (elementNumber) {

  idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber.toString();
  if ($("'#" + idCheckBoxToCompare + "'").prop('checked') === false) {
    return;
  }

  textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber.toString();
  textBoxValue = $("'#" + textBoxID + "'").val();

  for (i = 1; i < 8; i++) {

    if (i !== elementNumber) {
      idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i.toString();
      idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i.toString();
      inputBoxValue = $("'#" + idInputBox + "'").val();

      if ($("'#" + idCheckBox + "'").prop('checked') === true) {
        if (inputBoxValue === textBoxValue) {

          $("'#" + idCheckBox + "'").prop('checked', false);
        }
      }
    }
  }
}

I've tried to build same id as this is:

'#testid'

so usage would be:

$('#testid')

But it's not working. How to use properly dynamically created IDs?

You are creating, `$("'#testid'")` thus its not able to find element. Use `$("#" + idCheckBoxToCompare)` instead of `$("'#" + idCheckBoxToCompare + "'")` — Satpal, Nov 24 '16 at 12:52
Use Class instead of id for accessing dynamically created element, sure it works — Vaibhav shetty, Nov 24 '16 at 12:55
As @Satpal already commented you need to remove those single quotes. Further it looks like you need not only a dynamically generated id, but also a unique one. Whenever I need a dynamically generated and unique id I do `var id = "id" + Date.now();` and then you can do a `$("#" + id)` or `document.getElementById(id)`. Hope this is of some help. — Flyer53, Nov 24 '16 at 13:12

score 1 · Answer 1 · answered Nov 24 '16 at 13:01

Use this,

 var IterateCheckedDatesAndUncheckWithSameValue = function (elementNumber) {

    idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber.toString();
    if ($("#" + idCheckBoxToCompare).prop('checked') === false) {
        return;
    }

    textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber.toString();
    textBoxValue = $("#" + textBoxID).val();

    for (i = 1; i < 8; i++) {

        if (i !== elementNumber) {
            idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i.toString();
            idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i.toString();
            inputBoxValue = $("#" + idInputBox).val();

            if ($("#" + idCheckBox).prop('checked') === true) {
                if (inputBoxValue === textBoxValue) {

                    $("#" + idCheckBox).prop('checked', false);
                }
            }
        }
    }
}

Natsathorn · Accepted Answer · 2016-11-24T13:16:18.997

Your code is look complicated with too many " and '. Also Javascript can concat string and number by just use +. No need to convert it to string first. So, I updated it to make it more readable.

Try this

var IterateCheckedDatesAndUncheckWithSameValue = function(elementNumber) {

    idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber;
    if ($('#' + idCheckBoxToCompare).prop('checked') === false) {
        return;
    }

    textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber;
    textBoxValue = $('#' + textBoxID).val();

    for (i = 1; i < 8; i++) {

        if (i !== elementNumber) {
            idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i;
            idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i;
            inputBoxValue = $('#' + idInputBox).val();

            if ($('#' + idCheckBox).prop('checked') === true) {
                if (inputBoxValue === textBoxValue) {
                    $('#' + idCheckBox).prop('checked', false);
                }
            }
            console.log('#' + idCheckBox); //print here just to see the id results
        }
    }
}

ID in html can be only one element per page. So please make sure that the ID you generate from this method not match with other.

Jquery selector can read String variable.

So you can just do var id = "#test". Then put it like this $(id).

Or

var id = "test"; then $("#"+test).

user2402794 · Answer 3 · 2016-11-24T13:56:50.707

-2

I face the same problem using Jquery .Try $(document).getElementbyId('myid'). Hope help.

Edit Change : $("#" + idCheckBoxToCompare) by $(document).getElementbyId(idCheckBoxToCompare)

edited Nov 24 '16 at 13:56

answered Nov 24 '16 at 12:54

user2402794

23
6

5

You're mixing up VanillaJS and jQuery, while not answering the question. – roberrrt-s Nov 24 '16 at 12:57
this is not dynamic. – FrenkyB Nov 24 '16 at 12:57
@Roberrrt It is pure javascript ,am not know nothing about VanillaJS but in my case JQuery is unable to find and manage elemets with id created after document is fully loaded. So this line of code answer the question "I am trying to use dynamically created IDs in javascript function, but it's not working". I test the code and work for me. – user2402794 Nov 24 '16 at 13:35
Let me explain: Vanilla JS is a term used to describe native, non-influenced by library's code. (see http://stackoverflow.com/questions/20435653/what-is-vanillajs). You're using the `$(document)` method which means: you're wrapping the document in a jQuery object, followed by a function that would be called on the regular document. That's conflicting a library with 'vanilla' JS – roberrrt-s Nov 24 '16 at 13:37

jQuery use dynamically created ID

3 Answers3