When I put input inside a div the javascript doesn't work

Question:

I want to apply the css in a form but when I put the inputs inside some div the javascript doesn't work See the code: In this case when I type the email and the password it was for the button to turn blue activated.

<style>
    .btnDisabled{
        pointer-events:none;
        outline:none;
        border: none;
        background: gray; 
    }
    .btnEnabled{
        outline:none;
        border: none;
        background: blue; color: white;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">< /script>

<form id="formLog" method="post" action="website/login">
    <input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" />
    <input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" />
    <input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" />
</form>

<script>
  $ (' #formLog > input').on('input', function () {
    var emptyLog = false;
    $('form > input, form > select').each(function () {
        if ($('#txtELog').val() == '' || $('#txtPassLog').val() == '') {
            emptyLog = true;
        }
    });
    if (emptyLog) {
        $('#btnLog').attr('disabled', 'disabled');
        $('#btnLog').attr('class', 'btnDisabled');
    } else {
        $('#btnLog').removeAttr('disabled');
        $('#btnLog').attr('class', 'btnEnabled');
    }
});

</script>

I want to do this in the form:

<form id="formLog" method="post" action="website/login">
    <div class="inputText">< input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" /></div>
    <div class="inputText">< input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" /></div>
    <div class="inputButton">< input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" /></div>
</form>

But when I do that and fill in both fields, the javascript to activate the button doesn't work. Can someone help me? I need to put these inputs inside their respective divs to style the form.

Answer:

You have to remove the > sign from the selector. When you place the div s, the inputs are no longer direct descendants of the #formLog selector indicated by the > sign:

$(' #formLog  input').on('input', function () {
	var emptyLog = false;
	$('form input, form select').each(function () {
    	if ($('#txtELog').val() == '' || $('#txtPassLog').val() == '') {
	        emptyLog = true;
    	}
	});
	if (emptyLog) {
		$('#btnLog').attr('disabled', 'disabled');
		$('#btnLog').attr('class', 'btnDisabled');
	} else {
		$('#btnLog').removeAttr('disabled');
		$('#btnLog').attr('class', 'btnEnabled');
	}
});

.btnDisabled{
    pointer-events:none;
    outline:none;
    border: none;
    background: gray; 
}
.btnEnabled{
    outline:none;
    border: none;
    background: blue; color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formLog" method="post" action="website/login">
<div class="inputText"><input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" /></div>
<div class="inputText"><input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" /></div>
<div class="inputButton"><input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" /></div>
</form>

Otherwise, you would have to do like this: $('#formLog > div > input') if you wanted to refer only to the input s direct descendants of div s inside the #formlog .

What is a direct descendant?

It is a child element of the first level of the tree :

<div>
   <span> <-- descendente direto da div
      <p></p> <-- descendente direto do span
      <a></a> <-- descendente direto do span
   </span>
   <h1></h1> <-- descendente direto da div
</div>