How to ensure that an element will have the DOM event?

Question

How to ensure that an element will have the DOM event?

Asked 8 years, 1 month ago

Viewed 94 times

1

Good afternoon,

Today I am facing a rather strange bug in my application:

I have a textarea field where I type a body of email and just below it a button that when clicked obtains the content of the textarea, opens a modal and inserts the same content(value) inside the body of the modal.

The point is that some users are reporting that the button opens the modal but does not insert the value of the textarea within it.

While analyzing this issue I identified that it is not always that this occurs, when it gives problem, if you update the page the function tends to work.

When error occurs, when inspecting button click events I realize that it has been replaced by a Bootstrap JS function or simply no other function is replaced.

How can I make sure that doesn’t happen?

  $('#btnPreviewEmail').click(function(){
  var assunto  = $('#txtAssuntoEmail').val();
  var texto    = CKEDITOR.instances['txtAreaCorpoDoEmail'].getData();
  var namepage = 'Campanha Marketing Lojas Uno';
  var landing  = buscaLandingPorNamePage(namepage);
  assunto = assunto.replace(/{{.FirstName}}/g, "Renoir dos Reis");
  assunto = assunto.replace(/{{.DataHoje}}/g, '31/10/2016');
  texto   = texto.replace(/{{.FirstName}}/g, "Renoir dos Reis");
  texto   = texto.replace(/{{.Tracker}}/g, "");
  texto   = texto.replace(/{{.URL}}/g, landing);
  texto   = texto.replace(/{{.DataHoje}}/g, '31/10/2016');
  $('#containerAssunto').html(assunto);
  $('#containerPreview').html(texto);
});

Code of the button that opens the modal:

<button type="button" class="btn btn-warning" id="btnPreviewEmail" data-toggle="modal" data-target="#modalPreview">Pre-visualizar</button>

Modal:

1

You can put the HTML and code that fetches the value of the textarea?

– Sergio

2016/10/31 at 18:57
What is the line that fetches the value? is the text or the subject?

– Sergio

2016/10/31 at 19:02
@Sergio will both be searched

– Renoir Reis

2016/10/31 at 19:03
But they both come from one texarea and have problems appearing in the modal?

– Sergio

2016/10/31 at 19:04
@Sergio, txtAreaCorpoDoEmail is a textarea of CKEDITOR, and the subject comes from an input type="text". Both do not appear in modal.

– Renoir Reis

2016/10/31 at 19:10
1

And the code that actually opens the modal?

– bfavaretto

2016/10/31 at 19:11
@bfavaretto entered the missing details.

– Renoir Reis

2016/10/31 at 19:15
In the browser console (F12) some error appears?

– bfavaretto

2016/10/31 at 19:22
@bfavaretto no :(.

– Renoir Reis

2016/10/31 at 19:22
Everything indicates that you try to put content in the modal before the bootstrap leaves this modal ready. It may be that, it may not be. Try to put this code in a $('#modalPreview').on('show.bs.modal', function (event) { /* COD AQUI */ }) instead of putting on the button click

– bfavaretto

2016/10/31 at 19:25
1

That button btnPreviewEmail is created dynamically? Tries to replace $('#btnPreviewEmail').click(function(){ for $('#btnPreviewEmail').on('click', function(){

– Pedro Camara Junior

2016/10/31 at 19:25

Show 6 more comments

1 answer

Browser other questions tagged javascript jquery dom

You are not signed in. Login or sign up in order to post.

by Thales Chemenian • **354** points · Answer 1 · 2016-10-31T19:27:37+00:00

Have you tried using the click event this way?

$(document).on("click", "#btnPreviewEmail", function(){
    /*Seu Código*/
});

The code must be outside the Pageload of the script.

Difference between the .on("click") and .click() -

.on("click"):

It can work dynamically with elements that have been created from later on the page.
Only loaded when the event is triggered.
It should be used in a parent element, which is on the page since Pageload, to search from it the element that will be created dynamically (so $(document).on() and not $('#btnPreviewEmail').on()

.click()

It cannot be triggered if you have created an element later on your page.
It is loaded even if the element is not triggered.

More details: Reference in English

I hope I’ve helped.