Evento de clic de jquery que no se activa al utilizar el control de detección

Question

De acuerdo con knockout click binding documentation's "Note 3", Knockout evita que el evento click realice la función predeterminada. Para anular este comportamiento, todo lo que tengo que hacer es devolver verdadero desde la función de mi controlador. Por lo tanto, tengo este marcado:

<div data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

Ahora, yo quiero adjuntar un evento de clic al botón de la siguiente manera:

$(function() {  
    $('#btnParse').on('click', function() { alert('clicked'); return true;}); 
}); 

Tenga en cuenta que voy a volver verdadero de la función. Este manejador par nunca dispara. ¿Cómo puedo hacer que esto funcione?

Answer 1

La nota a la que se refiere para el enlace de clic se refiere al método en su modelo de vista, no a su manejador de clic personalizado.

En otras palabras, si usted tiene un data-bind="click: doSomething" en el elemento <button>, el método doSomething() en su modelo de vista debería devolver true si desea que se ejecute el controlador personalizado.

Answer 2

En mi situación, yo estaba trabajando con un array observable que necesita aplicar magia jQuery a cada elemento de ese conjunto. Estaba teniendo problemas con el enlace personalizado porque no quería tomar dos varibles de cada elemento de ese conjunto. Entonces, en mi paquete, agregué algo de ese oscuro elemento mágico a un elemento no observable como una función, de modo que cuando se pinchó el nombre, el mapa en el que estaba trabajando se movería a esa ubicación.

HTML:

<ul data-bind="foreach: filteredItems"> 
    <li class="seat"> 
     <span class="name" data-bind="text:fullName, click: toggleEmp"></span> 
    </li> 
</ul> 

CÓDIGO:

function viewModel() { 
    var vm = this; 
    vm.empData = function(data) { 
     var emp = this; 
     emp.office_x_loc = ko.observable(data.xLoc); 
     emp.office_y_loc = ko.observable(data.yLoc); 
     emp.toggleEmp = function() { 
      jQuery('#skyLineMap').lhpMegaImgViewer('setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false); 
    };//*/ 
}//*/ 

espero que esto ayude a

Answer 3

creo que el problema tiene que ver con la modificación de la eliminatoria de la DOM en el que está tratando de obligar a la evento. Para evitar esto, intente asignar la función de clic al elemento principal <div>. Al asignar el controlador de clics, use la sobrecarga con un selector para especificar que desea manejar el clic solo cuando se hace clic en el botón contenido. Por ejemplo, cambiar div así:

<div id="btnContainer" data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

Y luego cambiar su secuencia de comandos para:

$(function() {  
    $('#btnContainer').on('click', '#btnParse', function() { alert('clicked');}); 
}); 

Tenga en cuenta que si esto <div> está contenido dentro de otro bloque lógico que modifica el DOM, (una plantilla, foreach ciclo, etc.), probablemente deba establecer la etiqueta #btnContainer en el primer antecesor del <button> que no forma parte de dicho bloque lógico.

Answer 4

El motivo por el que su controlador de clics nunca se activa es porque nunca se aplicó a su elemento. Así que cuando usted hace esto en jQuery:

$('.some-class').on('some-event', someFunction); 

Entonces para el manejador de estar vinculado a ese evento, primero jQuery tiene que encontrar su selector de $('.some-class'). En su caso, lo más probable es que #btnParse aún no se represente en la página por nocaut cuando vincula el evento. O, también es posible, que el elemento original se represente, destruya y luego se represente otro elemento. En este segundo escenario, el controlador de eventos no permanecería en el botón.Una alternativa (que no recomiendo) es enlazar el controlador más arriba en el DOM, como a nivel document, y los eventos de filtro a sólo aquellos de algo con un id #btnParse:

$(document).on('click', '#btnParse', function() { console.log('hi'); }); 

La razón por la que No lo recomiendo porque es una mala práctica, debería usar el enlace click como se sugirió en otras publicaciones. Además, está utilizando un atributo de id. Y, en general, eso no es una buena idea para el contenido dinámico con plantilla: solo use clases a menos que necesite absolutamente una identificación para un elemento estático único.

En cuanto a cómo utilizar correctamente el enlace de clic, lo difícil es que tendrá que entender cómo funciona el efecto directo. Si, por ejemplo, estás vinculante un clic dentro de un bucle, y desea que el controlador de su modelo principal punto de vista, hay que hacer referencia al ámbito padre porque el bucle cambia su contexto:

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction"></a> 
<!-- /ko --> 

Por otra parte, si es necesario cambiar el contexto de Javascript que su controlador ejecuta con (el this), entonces usted necesita para enlazar el controlador de clic como esto:

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction.bind($parent)"></a> 
<!-- /ko --> 

Juega con esas cosas un poco y hacer una nueva pregunta si estás sigo confundido. ¡Buena suerte!