introJs() API 在附加到 jquery 模式对话框内的元素时不起作用

Question

I am trying to show an Intro.js tour on an element which is inside a <table> . The <table> is inside a jquery UI dialog box

I am populating the table rows in my JavaScript:

while (i != 10) {
  var row = t1.insertRow(t1.rows.length);
  var cell = row.insertCell(0);
  var cell1 = row.insertCell(1);
  
  cell.innerText = "some text";

  var input = document.createElement("select");
  
  input.className = "abc";
  
  for (var j = 0; j < insts.length; j++) {
    var option = document.createElement("option");
    
    option.value = insts[j];
    option.text = insts[j];
    input.appendChild(option);
  }
  
  cell2.appendChild(input);
}

After that, I am displaying my dialog box, which opens a modal dialog box:

$(function() {
  $("#dialog").dialog({
    modal: true,
    autoOpen: false,
    width: "auto",
    height: "auto",
    show: {
      effect: "slide",
      duration: 1000
    },
    hide: {
      effect: "fold",
      duration: 1000
    }
  });
  $("#dialog").dialog("open");
});

Now, when there's any change in the <select> element, I want to trigger an Intro.js tour like this:

document.addEventListener("change", function(e) {
  if (e.target.className == "abc") {
    introJs().setOption("dontShowAgain", true).start();
  }
})

But the Intro.js tour never starts, even when I change the values of any of the <select> elements. When I attach the introJS listener to the main window, then it works. But when I attach it to any element inside the modal dialog box it doesn't work. Why is that? How do I fix this?

EDIT: The introJS() tour should show inside this modal dialog box (pointed by the red arrow)

screenshot

Answer 1

Without seeing a debugging session directly in the browser, I'd start with making sure a event listener is assigned to each select object. Since you are in a loop, there will be multiple.

// in while loop
var input = document.createElement("select");
input.setAttribute("id", "selector_"+i)
// still in loop
input.addEventListener("change", function() {
        // do stuff
});
i++;