Necesito detectar clics fuera del elemento con id 'proplist'. Sin embargo, ya tengo una función de evento 'encendido' que detecta cambios de valor de una entrada. Traté de acceder al valor de la clave de formulario desde el evento mouseup, pero no devolví ningún dato. ¿Cómo puedo obtener el valor de form-key después de detectar clics fuera del elemento?
$('#plusData').on("blur", "input[id^=form-key]", function(){ console.log($(this).val()); $(document).mouseup(function (e) { if ($(e.target).closest("#proplist").length === 0 ) { console.log($(this).val()); } }); });código HTML
<div id="proplist"> <div id="plusData"> <div class="form-group form-group-extraData" id="box" style="width: 100%;"> <input type="text" class="form-control" id="form-key1" name="key" > <input type="text" class="form-control" id="form-content1" name="content" > <input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()"> </div> </div> </div>Hasta donde yo sé, realmente no puedes modificar el elemento exterior desde un selector css.
Pero simplemente puede agregar otro detector de eventos para el padre de este elemento, o agregar dicho contenedor para eso. Pseudoselector de CSS :has() tal vez una salida para esto.
Por ejemplo, hice 2 envoltorios en el fragmento a continuación, uno tiene un #proplist secundario y el otro no.
$('.wrapper:has(#proplist)').click(e => { console.log(e.target.classList.value); e.target.classList.toggle('red'); }); .wrapper { background: none; height: 100px; border: 1px solid #000; } .wrapper.red { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div id="proplist"> <div id="plusData"> <div class="form-group form-group-extraData" id="box" style="width: 100%;"> <input type="text" class="form-control" id="form-key1" name="key" > <input type="text" class="form-control" id="form-content1" name="content" > <input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()"> </div> </div> </div> </div> <div class="wrapper"> <h1>Not having proplist</h1> </div>