2016-08-05 3 views
1

Я пытаюсь запустить событие после привязки определенных элементов к представлению.jQuery - при загрузке динамически добавленных элементов

Я пытаюсь использовать следующее, но он не работает:

$(".featWrap").on("load", ".box", function() { 
    $(".featWrap").slick({dots: true}); 
}); 

Используя следующие работы, но мне нужно, чтобы запустить событие, когда переплетен элемент, а не при его нажатии:

$(".featWrap").on("click", ".box", function() { 
    $(".featWrap").slick({dots: true}); 
}); 

Я думал об использовании пользовательского события после того, как его переплетены, но я не могу это сделать, потому что функция, которая связывает данные выглядит следующим образом:

APP.bind["game.featuredPrizes"] = APP.get("user.featuredPrizes", function (featuredPrizes) { 
    return featuredPrizes.map(formatFeatured); 
}); 
+0

bytheway '.load()' устарел в jquery ver 1.8 и удален из 3.0 – bipen

+0

@FerVargas add html plz –

ответ

2

Если вы хотите послушать новые динамически добавленные элементы, вы можете использовать Mutation events. Здесь вы найдете documents browser support for mutation events.

Немного демо:

// listen for the newly added elements with class box 
 
$(document).on('DOMNodeInserted', '.box', function (e) { 
 
    var element = e.target; 
 
    setTimeout(function() { 
 
    $(element).fadeOut(1000, function() { 
 
     $(this).remove(); 
 
    }); 
 
    }, 2000); 
 
}); 
 

 
$(function() { 
 
    
 
    // create and add a new element on the fly 
 
    
 
    $('#insert').on('click', function (e) { 
 
    $('<div/>', { 
 
     class: 'test', 
 
     text: 'Test Generic' 
 
    }).appendTo('body'); 
 
    }); 
 
    
 
    $('#insertBox').on('click', function (e) { 
 
    $('<div/>', { 
 
     class: 'box', 
 
     text: 'Test Generic' 
 
    }).appendTo('body'); 
 
    }); 
 

 
});
.box { 
 
    padding: 1em; 
 
    background: #ffa; 
 
    border: 1px solid #999; 
 
} 
 
.test { 
 
    padding: 1em; 
 
    background: #008000; 
 
    border: 1px solid #999; 
 
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<button id="insertBox">Insert box</button> 
 
<button id="insert">Insert a generic element</button>

+0

Это сделал трюк, он теперь обнаруживает, когда элемент добавлен. Проблема в том, что пятно не инициализируется. Но это не связано с этим. –

0

мне нужно сгореть случай, когда элемент переплетены, а не при ее нажатии:

Это не представляется возможным

$("#id").on("bind", function() { 
    // This is what you want to achieve 
    // Calling this function when an event has been binded to $("#id") 
    console.log("bind click binded"); 
}); 

$("#id").bind("click", function() { 
    console.log("click binded"); 
});