javascript not triggering in mvc

Following is my Jscript in one of View in my MVC 4 project.

but for some reason it is not triggering.

<script type="text/javascript">
$(document).ready(function () {

$("#purchasedate, #paymentdate, #datepickerNoModel").datepicker({ changeMonth: true, changeYear: true });

$("#WBSlips").change(function () {
$.ajax({
type: "Get",
url: '@Url.Action("PopulateDetails", "KapasPurchase")',
data: { slips: $("#WBSlips").text() },
dataType: "json",
success: function (data) {
$("#txtVehicleNo").val(data[0]);
$("#txtFarmerId").val(data[1]);
}
})
});
});
</script>

Take a look at what you're actually doing in this code...

You attach a function to the `document.ready` handler to execute at that event:

$(function () {
// code
});

And in that function you... attach a function to the `document.ready` handler:

$(document).ready(function () {
// code
});

So that function will run *the next time* the document is ready. Which never happens.

Simply remove one of your references to the `document.ready` handler:

<script>
$(function () {
$("#WBSlips").change(function () {
// code
});
});
</script>

Note also that of course the document is going to need a `#WBSlips` element at the time this executes in order to attach anything to its `change` handler. I'm assuming that's the case here.