0

I have created dynamic table using javascript,But the problem is I want to mannually trigger click event of dynamically added text boxes on change event of dynamically added dropdown

2
  • 1
    show your relevant code Commented Jul 27, 2017 at 11:33
  • Do you have javascript functions associated to the click handlers? Then why don't you call the click handler function, instead of triggering click event through the browser? Commented Jul 28, 2017 at 5:16

2 Answers 2

2

if you're using jQuery you can use .trigger('click') on the element that has the click listener, if you aren't using jQuery you can do more or less the same with .dispatchEvent():

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var cancelled = !cb.dispatchEvent(event);
  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}
Sign up to request clarification or add additional context in comments.

Comments

1

If you are using pure javascript

Try this

var table = document.createElement("table");
table.border=1
table.cellPadding=10
table.cellSpacing=0
for(var i=0;i<5;i++){
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  var td2 = document.createElement("td");
  var td3 = document.createElement("td");
  td1.innerHTML=i+1;
  var tb = document.createElement("input");
  tb.type="text";
  //Binding Event to textbox
  tb.addEventListener('click',function(){
    alert("Clicked")
  })
  var ddl = document.createElement("select");
  for(var j=0;j<3;j++){
    var ddlOption=document.createElement("option");
    ddlOption.value=j+1;
    ddlOption.innerHTML=j+1;
    ddl.appendChild(ddlOption);
  }
  //Binding Event to dropdownlist
  ddl.addEventListener('change',function(){
    alert(this.value);
  })
  
  td2.appendChild(tb);
  td3.appendChild(ddl);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3); 
  table.appendChild(tr);
}
document.getElementById("MyDiv").appendChild(table)
<Div id="MyDiv">
  
</Div>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.