How to open a modal that is out of function, jquery?

Question

How to open a modal that is out of function, jquery?

Navigation

#1 by (5 votes)
#2 by (-1 votes)

0

I have the following function that opens a modal

$$('.page[data-page=selecciondireccion] [data-action=change-quantity]').on('click', function(e) {
    e.preventDefault();
    var el = $(this).closest('.swipeout');
    var el_product_quantity = el.find('.product-quantity');
    var product_unit_price = el.find('.item-after').data('unit-price');
    var el_product_amount = el.find('.product-amount'); 
    myApp.prompt('Cantidad', 
  function(value) {
    if(value > 0) {
                el_product_quantity.text(value);
                el_product_amount.text(product_unit_price * value);
            }
            updateAmount();
  }
);
    myApp.swipeoutClose(el);
});

and I generate a list of products dynamically in this way:

 $$("#btn-verCarrito").click(function(e){
    myApp.showTab("#historialCarrito", true);  
     //Agregando la lista de productos
     var listProductos = $('.products-list');
     $.each(valCarrito, function(i){
            $('<li/>').addClass('swipeout')
                .append($('<div/>').addClass('swipeout-content item-content')
                            .append($('<div/>').addClass('item-media')
                                .append('<img src="https://www.dropbox.com/s/v7vadq9iitpheo4/iphone-7-plus-black.png?raw=1" alt="Apple iPhone 7 Plus (Black)" width="55" height="75" />'))
                            .append($('<div/>').addClass('item-inner')
                                .append($('<div/>').addClass('item-title-row')
                                        .append($('<div/>').addClass('item-title').text('Contenido dinamico'))
                                        .append('<div class="item-after" data-unit-price="'+valCarrito[i].cantProducto+'">Q<span class="product-amount">'+0+'</span></div>')
                                        )
                                .append('<div class="item-subtitle">Color: Black | Storage: 128 GB</div>')
                                .append($('<div/>').addClass('item-text')
                                            .append($('<div/>').addClass('chip chip-small').append('<div class="chip-label"><span class="product-quantity">'+valCarrito[i].cantProducto+'</span></div>')))
                                    )
                        )
                .append($('<div/>').addClass('swipeout-actions swipeout-actions-right')
                        .append('<a href="#" class="swipeout-action bg-amber" data-action="change-quantity"><i class="swipeout-action-icon fa fa-pencil"></i><span class="swipeout-action-label">Cambiar&nbsp;Cantidad</span></a>'))

            .appendTo(listProductos);
            updateAmount();
     });
    e.preventDefault();
});

The detail is in this part of the code:

.append('<a href="#" class="swipeout-action bg-amber" data-action="change-quantity"><i class="swipeout-action-icon fa fa-pencil"></i><span class="swipeout-action-label">Cambiar&nbsp;Cantidad</span></a>'))

when clicking here you must open the modal that is in the function that previously gave. I should send to call the function with this part: data-action="change-quantity" but with the dynamic content does not send open the mode, now if everything is added statically from the html if you execute the modal.

Thank you.

jquery

asked by JG_GJ 30.08.2018 в 21:10

source

2 answers

-1

At the moment you want the modal to run in the documentation, it tells you clearly when you want to activate the modal, you just have to call it that way

$("#mymodal").modal("show")

answered by 30.08.2018 в 21:17

Assign className depending on a propp Why do I get the error that the series starts from 11?

score 5 · Accepted Answer

When creating dynamically the html does not recognize the%% event% of the called%. For that, you should pass a third parameter to click for it to work.

Something like the following:

$$('.products-list').on('click', '.page[data-page=selecciondireccion] [data-action=change-quantity]', function(e) { ...
// el .products-list es un html estático y padre del elemento que vas a agregar

Within what you have done would be as follows:

$$('.products-list').on('click', '.page[data-page=selecciondireccion] [data-action=change-quantity]', function(e) {
    e.preventDefault();
    var el = $(this).closest('.swipeout');
    var el_product_quantity = el.find('.product-quantity');
    var product_unit_price = el.find('.item-after').data('unit-price');
    var el_product_amount = el.find('.product-amount'); 
    myApp.prompt('Cantidad', 
  function(value) {
    if(value > 0) {
                el_product_quantity.text(value);
                el_product_amount.text(product_unit_price * value);
            }
            updateAmount();
  }
);
    myApp.swipeoutClose(el);
});

Note:

This happens because at the moment of executing the event .on() does not exist inside the DOM, and then when creating the rest dynamically, it will not recognize it.