Bonsoir,

J'utilise un système de recherche en AJAX qui m'affiche dynamiquement les résultats de la recherche.
Sur ces résultats, j'ai des boutons de partages et un script JS qui me les récupère et ajoute des event seulement les résultats chargés dynamiquement n'ont pas ces event puisqu'au chargement de la page ils n'existait pas !

J'aurais donc aimé savoir si il existait un moyen de recharger les script en question ?

(function () {

    var popUpCenter = function (url, title, width, height) {

        var popUpWidth = width || 640
        var popUpHeight = height || 360
        var windowLeft = window.screenLeft || window.screenX
        var windowTop = window.screenTop || window.screenY
        var windowWidth = window.innerWidth || document.documentElement.clientWidth
        var windowHeight = window.innerHeight || document.documentElement.clientHeight
        var popUpLeft = windowLeft + windowWidth / 2 - popUpWidth / 2
        var popUpTop = windowTop + windowHeight / 2 - popUpHeight / 2
        var popup = window.open(url, title, 'scrollbars=yes, width=' + popUpWidth + ', height=' + popUpHeight + ', top=' + popUpTop + ', left=' + popUpLeft)

        popUp.focus()
        return true

    }

    var twitterS = document.querySelectorAll('.sharer.twitter')
    var facebookS = document.querySelectorAll('.sharer.facebook')
    var googleS = document.querySelectorAll('.sharer.google')

    for(var i = 0; i < twitterS.length; i++) {

        var twitter = twitterS[i]
        twitter.addEventListener('click', function (e) {

            e.preventDefault()
            var url = this.getAttribute('data-url')
            var shareUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.title) + "&via=pad_books" + "&url=" + encodeURIComponent(url)
            popUpCenter(shareUrl, "Partager sur Twitter")

        })

    }

    for(var j = 0; j < facebookS.length; j++) {

        var facebook = facebookS[j]
        facebook.addEventListener('click', function (e) {

            e.preventDefault()
            var url = this.getAttribute('data-url')
            var shareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url)
            popUpCenter(shareUrl, "Partager sur Facebook")

        })

    }

    for(var k = 0; k < googleS.length; k++) {

        var google = googleS[k]
        google.addEventListener('click', function (e) {

            e.preventDefault()
            var url = this.getAttribute('data-url')
            var shareUrl = "https://plus.google.com/share?url=" + encodeURIComponent(url)
            popUpCenter(shareUrl, "Partager sur Google+")

        })

    }

})()
var search = document.querySelector('form.ajax-search')
var filter_S = document.querySelectorAll('span.search.sort-span')
var body = document.querySelector('body')
var select_S = document.querySelectorAll('select.search')
var searcher = search.querySelector('i.fa.fa-search')
var clear = search.querySelector('i.fa.fa-times')

searcher.addEventListener('click', function(e) { sendSearch() })
clear.addEventListener('click', function(e) {

    var input = search.querySelector('input.header-search-input')
    input.value = ''
})

search.addEventListener('submit', function(e) {

    e.preventDefault()
    sendSearch()
})

for(var i = 0; i < filter_S.length; i++) {

    var filter = filter_S[i]

    filter.addEventListener('click', function(e) {

        e.preventDefault()

        var sort = this.getAttribute('data-sort')
        var icon = this.querySelector('i.fa')
        var name = this.getAttribute('data-sort-name')

        if(sort === '') {
            this.setAttribute('data-sort', 'asc')
            icon.classList.remove('fa-sort')
            icon.classList.add('fa-sort-asc')
            search.setAttribute('data-sort-' + name, 'asc')
            sendSearch()
        }
        else if(sort === 'asc') {
            this.setAttribute('data-sort', 'desc')
            icon.classList.remove('fa-sort-asc')
            icon.classList.add('fa-sort-desc')
            search.setAttribute('data-sort-' + name, 'desc')
            sendSearch()
        }
        else {
            this.setAttribute('data-sort', '')
            icon.classList.remove('fa-sort-desc')
            icon.classList.add('fa-sort')
            search.setAttribute('data-sort-' + name, 'noApplicable')
            sendSearch()
        }
    })
}

for(var i = 0; i < select_S.length; i++) {

    var select = select_S[i]

    select.addEventListener('change', function(e) {

        e.preventDefault()

        var value = this.value
        this.setAttribute('data-sort', value)

        var sort = this.getAttribute('data-sort')
        var name = this.getAttribute('data-sort-name')
        search.setAttribute('data-sort-' + name, sort)
        sendSearch()
    })
}

function sendSearch() {

    if(search.getAttribute('data-redirect')) {

        var redirect = search.getAttribute('data-redirect')
        setTimeout(function() { window.location.href = redirect }, 2000)
    }

    var xhr_form = new XMLHttpRequest()
    var data = new FormData(search)
    var reload_S = document.querySelectorAll('script[data-reload]')

    var actionPage = search.getAttribute('data-action-page')
    var filterDate = search.getAttribute('data-sort-date')
    var filterPrice = search.getAttribute('data-sort-price')
    var filterType = search.getAttribute('data-sort-type')
    var filterCategory = search.getAttribute('data-sort-category')
    var actionNew = actionPage + '?filter=' + filterDate + '|' + filterPrice + '|' + filterType + '|' + filterCategory

    search.setAttribute('action', actionNew)

    xhr_form.open('POST', search.getAttribute('action'), true)
  xhr_form.setRequestHeader('X-Requested-With', 'xmlhttpsrequest')
  xhr_form.send(data)

    body.classList.add('loading')

    xhr_form.onreadystatechange = function () {

        if(xhr_form.readyState === 4) {

            body.classList.remove('loading')

            for(var i = 0; i < reload_S.length; i++) {

                //Rechargements des scripts
            }

            if(xhr_form.status != 200) {

                //L'opé à loupé

            } else {

                //L'opé à réussis
                var response = xhr_form.responseText
                var content = document.querySelector('.results-content')
                content.innerHTML = response
            }
        }
    }
}

3 réponses


quentin_ney
Réponse acceptée

Ce que tu peux faire sans avoir recours à Jquery, c'est d'entourer ton premier code par

function bindResults() {
    // ton code
}

au lieu de

(function () {
    // ton code
})()

Pense bien à inclure ce fichier dans ta page HTML avant celui de ta deuxième partie de code.
Ensuite, lorsque tu récupères tes résultats, fais appel à la fonction déclarée avant.

} else {
    //L'opé à réussis

    var response = xhr_form.responseText
    var content = document.querySelector('.results-content')
    content.innerHTML = response
    bindResults()
}

Salut,

Je pense que tu peux trouver la réponse à ta question dans cette vidéo. Avec la fonction .on(), tu ne seras pas obligé de rebinder tes événements sur chaque élément que tu ajoutes

Bonjour.
@quentin_ney: C'est en effet une solution, mais comme tu peux le voir dans tout le code qu'il présente, il n'utilise pas jQuery, il doit donc plutôt attendre une solution qui ne le contraint pas à devoir utiliser une librairie ou un framework juste pour cette spécificité.
Ce serait quand même dommage de lui faire charger une librairie juste pour ça, bien que s'il ne charge que la version slim le poids sera moindre.