0

I am working with ckeditor. I am using below code. addEventListener is not working here. I am not getting any error in console also.

function imageSelect(evt) {
    alert('hello');
}

CKEDITOR.on( 'dialogDefinition', function( ev )
{
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if ( dialogName == 'image' )
    {
    dialogDefinition.addContents({
        id : 'uploadTab',
        label : 'Upload',
        elements : [
        {
            type: 'text',
            id: 'uploadField',
            label: 'Search images',   
            onInput: function() {
                var textBox = this.getInputElement();
                var value = textBox.getValue();
                if( value !== "") {
                var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(value);  

                    var currentPage = 1;
                    var perPage = 100;
                    var totalPages = 0;
                    var totalHits = 0;

                    function showImages(data) {
                        if (parseInt(data.totalHits) > 0) {
                            totalHits = parseInt(data.totalHits);
                            totalPages = Math.ceil(totalHits / perPage);
                            var images = "";

                            $.each(data.hits, function (i, hit) {
                                images += "<img class='upload_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
                            });

                            document.getElementById("upload_image_p").innerHTML = "";                                                       

                            document.getElementById("upload_image_p").innerHTML += "<div id='container'>"+ images +"</div>";
                            
                            var imgs = document.getElementsByClassName('upload_image');
                            for (var i = 0; i < imgs.length; i++) {
                                imgs[i].addEventListener('click', imageSelect);  //addEventListener is not working here
                            }

                            // show pagination buttons
                            var pagination = "<div id='pagination'>";
                            pagination += "<button id='prevBtn'>Prev</button>";
                            pagination += "<button id='nextBtn1'>Next</button>";
                            pagination += "</div>";
                            document.getElementById("container").innerHTML += pagination;


                            // add event listeners to pagination buttons
                            var prevBtn = document.getElementById('prevBtn');
                            var nextBtn1 = document.getElementById('nextBtn1');

                            
                            prevBtn.addEventListener('click', function () {
                                currentPage--;
                                getImages(currentPage);                                    
                                nextBtn1.disabled = false;
                            });

                            if (currentPage === 1) {
                                prevBtn.disabled = true;
                            }

                            nextBtn1.addEventListener('click', function () {
                                currentPage++;
                                getImages(currentPage);
                                prevBtn.disabled = false;
                            });
                            
                            if (currentPage === totalPages) {
                                nextBtn1.disabled = true;                                      
                            }
                            

                        } else {
                            document.getElementById("container").innerHTML = "No hits";
                        }
                    }
                    

                    function getImages(page) {
                        var pageURL = URL + "&page=" + page + "&per_page=" + perPage;
                        $.getJSON(pageURL, function (data) {
                            showImages(data);
                        });
                    }

                    // show loading icon
                    document.getElementById("upload_image_p").innerHTML = '<img src="./assets/img/loading_icon.gif">';

                    // fetch first page of images
                    getImages(currentPage);                  

                }
                else {
                    document.getElementById("upload_image_p").innerHTML = "";
                    document.getElementById("upload_image_p").innerHTML += '<img src="./assets/img/loading_icon.gif">';
                }
            } 
        },
        {
            type: 'html',
            id: 'upload_html',
            html: '<div id="upload_image_p"><img src="./assets/img/loading_icon.gif"></div>',
        }
        ]
    });
    }
});
abu abu
  • 6,599
  • 19
  • 74
  • 131
  • 1
    Please move your functions out of inner scopes – Justinas May 03 '23 at 07:44
  • 1
    Does this answer your question? [Attach event to dynamic elements in javascript](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) – Justinas May 03 '23 at 07:45

0 Answers0