How to recover values of fields loaded with jQuery

Question

Hello, I recently ran into a problem loading div content dynamically using jQuery, but it turns out that when I upload the content to that div, I can’t recover the values that are sent from it.

The content loaded in the div is a form, which when clicked on the "add" button, it loads another function in the "onclick" event of that same button, but when I click on that button the div returns to the value set in the default of the switch and does not load the event function placed on the button.

One of the forms loaded in this div is the addition of products:

<form method="POST">
<input type="text" name="produto"/>
<input type="number" name="preco"/>
<textarea name="descricao"></textarea>
<select name="categoria">
 <option value="1">1</option>
 <option value="1">1</option>
</select>
<button onclick="add()">Adicionar</button>

For example, when pressing the "Add" button, if the add() function was executed without error, a message was displayed in the div "staus" and remained on the same page instead of returning to the default page

Note: the add() function collects the data coming from the form. Part of the script that deals with this form:

produto = $('input[name=xxx]').val();
$.post('adicionar.php',{produto:produto},function(i){$('#staus').html(i)});

http://jsfiddle.net/Xb576/1/

Answer 1

EDIT: the div #staus is within the element #direita which is the target of the method load, and will therefore be replaced by form that is coming from the server. Therefore, when clicking the button, the div #status it will no longer exist because it has been deleted from the page.

load is asynchronous

The method load jquery is asynchronous. To access the elements brought by the method load jquery, you should add a callback function for when the request is ready:

$('#direita').load("url", 
     function (responseText, textStatus, XMLHttpRequest) {
         if (textStatus == "success") {
             // o request funcionou e os elementos já devem estar disponíveis
             // aqui você pode associar eventos aos elementos trazidos via AJAX
         }
         if (textStatus == "error") {
             // o request não funcionou, você terá de informar o usuário de que
             // algo deu errado
         }
     }

Other remarks in your code

The case of switch is done by placing only the value to be compared, and not by making an assignment in the case.

switch(mostrar){
    case 'add': // errado: case mostrar = 'add' 
        break;
    case 'editar': // errado: case mostrar = 'editar' 
        break;
    default:
}

Answer 2

This is because when delegating the event to the button, it does not yet exist in the DOM. For the event to work with an element that will still be loaded into the DOM, you can delegate the event to an existing parent element and add a filter to the actual desired selector.

Example:

$(document).on('click', 'button', function(event) {

    // 

});

Whereas $(document) is the element to which the event is delegated, and 'button' the filter that corresponds to a possible element that already exists or will appear within $(document).